Two functions need to be implemented in an html page, the previous button and the next button. For example, I need the user to focus on row 5, row 10, and row 20. Then when the user clicks on row 5 "Next button". You can jump to line 10. Click the next button again to jump to line 20. Click the previous button for the same reason. How to implement these two functions.
is to jump between different lines of the current html page. I need to know the user's current line before I can judge the jump
To change my mind, I only need to operate the vertical scroll bar, and the effect is the same of. No matter which row it is in, it corresponds to the position of a scroll bar. Jumping downward means sliding the scroll bar downward.
The method is to detect and set window.scrollTop. For example, in the fifth line, window.scrollTop already has a corresponding value. If you want to jump down another 5 lines to the 10th line, multiply it by 5 according to the line height of each line (line-height attribute) to get how much it should slide down:
window.scrollTop=window.scrollTop Your Row height of each row*5;
Then the slider will slide down to the specified position. Saying this, both buttons came out.
Wrong reply, you should use window .scrollTo method, get offsetX and offsetY and pass them to scrollTo
Add an anchor point to the line to be jumped
goto1
Browser url setting window.location = window.location.href.split('#')[0] '#goto1'
I found a scrolling plug-in, based on JQ
var bookmarkscroll={ setting: {duration:1000, yoffset:0}, //{duration_of_scroll_milliseconds, offset_from_target_element_to_rest} topkeyword: '#top', //keyword used in your anchors and scrollTo() to cause script to scroll page to very top scrollTo:function(dest, options, hash){ var $=jQuery, options=options || {} var $dest=(typeof dest=="string" && dest.length>0)? (dest==this.topkeyword? 0 : $('#'+dest)) : (dest)? $(dest) : [] //get element based on id, topkeyword, or dom ref if ($dest===0 || $dest.length==1 && (!options.autorun || options.autorun && Math.abs($dest.offset().top+(options.yoffset||this.setting.yoffset)-$(window).scrollTop())>5)){ this.$body.animate({scrollTop: ($dest===0)? 0 : $dest.offset().top+(options.yoffset||this.setting.yoffset)}, (options.duration||this.setting.duration), function(){ if ($dest!==0 && hash) location.hash=hash }) } }, urlparamselect:function(){ var param=window.location.search.match(/scrollto=[\w\-_,]+/i) //search for scrollto=divid return (param)? param[0].split('=')[1] : null }, init:function(){ jQuery(document).ready(function($){ var mainobj=bookmarkscroll mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body') var urlselectid=mainobj.urlparamselect() //get div of page.htm?scrollto=divid if (urlselectid) //if id defined setTimeout(function(){mainobj.scrollTo(document.getElementById(urlselectid) || $('a[name='+urlselectid+']:eq(0)').get(0), {autorun:true})}, 100) $('a[href^="#"]').each(function(){ //loop through links with "#" prefix var hashvalue=this.getAttribute('href').match(/#\w+$/i) //filter links at least 1 character following "#" prefix hashvalue=(hashvalue)? hashvalue[0].substring(1) : null //strip "#" from hashvalue if (this.hash.length>1){ //if hash value is more than just "#" var $bookmark=$('a[name='+this.hash.substr(1)+']:eq(0)') if ($bookmark.length==1 || this.hash==mainobj.topkeyword){ //if HTML anchor with given ID exists or href==topkeyword if ($bookmark.length==1 && !document.all) //non IE, or IE7+ $bookmark.html('.').css({position:'absolute', fontSize:1, visibility:'hidden'}) $(this).click(function(e){ mainobj.scrollTo((this.hash==mainobj.topkeyword)? mainobj.topkeyword : $bookmark.get(0), {}, this.hash) e.preventDefault() }) } } }) }) }}bookmarkscroll.init()</script><div id="box-163css"> <ul class="nav"> <li><a href="javascript:bookmarkscroll.scrollTo('first')" class="unselected">The Big Day</a></li> <li><a href="javascript:bookmarkscroll.scrollTo('second')" class="unselected hovered">Getting Here</a></li> <li><a href="javascript:bookmarkscroll.scrollTo('third')" class="unselected">Registry</a></li> <li><a href="javascript:bookmarkscroll.scrollTo('fourth')" class="unselected">Send A Message</a></li> </ul><div id="main">
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
