在一个html页面中需要实现两个功能，上一个按钮和下一个按钮，比如我需要用户重点查看第5行，第10行，第20行，那么当用户在第5行的时候点击“下一个按钮”。就能跳到第10行，再次点击下一个按钮就能跳到第20行，点击上一个按钮同理，如何实现这两个功能。
就是在当前的html页面的不同行之间跳转。我需要知道用户当前行，才能判断进行跳转
转换一下思路，只需要对垂直滚动条进行操作就行，效果是一样的。无论在哪行，都对应一个滚动条的位置，向下跳转就是向下滑动滚动条。
方法是检测和设置window.scrollTop。比如在第五行时，window.scrollTop就已经有一个对应的值。要想向下再跳5行到第10行，就根据你每行的行高(line-height属性）乘以5，就得到应该下滑多少了:
window.scrollTop=window.scrollTop+你的每行行高*5;
这样滑动条就下滑到指定位置了。这样说着，两个按钮就都出来了。
回复错了,应该用window.scrollTo方法，得到offsetX和offsetY传给scrollTo
要跳转的行加个锚点
goto1
浏览器url设置 window.location = window.location.href.split('#')[0]+'#goto1'
找了个滚动插件，基于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">
