After clicking the button, html will jump to the current page_html/css_WEB-ITnose

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

Reply to the discussion (solution)

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">