ボタンをクリックすると、htmlは現在のページにジャンプします_html/css_WEB-ITnose

HTML ページには、「前へ」ボタンと「次へ」ボタンという 2 つの機能を実装する必要があります。たとえば、ユーザーが行 5、行 10、行 20 に注目する必要があります。その後、ユーザーが行で「次へ」をクリックすると、 5ボタン」。 10 行目にジャンプできます。もう一度「次へ」ボタンをクリックすると 20 行目にジャンプします。同じ理由で「前」ボタンをクリックします。これら 2 つの関数の実装方法。

は、現在の HTML ページの異なる行間をジャンプします。判断してジャンプする前に、ユーザーの現在の行を知る必要があります

ディスカッション (解決策) に返信

考え方を変えて、垂直スクロール バーを操作するだけで効果は同じです。どの行であっても、下にジャンプするということは、スクロール バーを下にスライドさせることを意味します。
方法は、window.scrollTopを検出して設定することです。たとえば、5 行目では、window.scrollTop に対応する値がすでに存在しています。さらに 5 行下にある 10 行目にジャンプしたい場合は、各行の行の高さ (line-height 属性) に応じて 5 を掛けて、どのくらい下にスライドするかを取得します。
window.scrollTop=window.scrollTop+各行の行の高さ*5; これにより、スライダーが指定された位置まで下にスライドします。こう言うと両方のボタンが出てきました。


間違った応答です。window.scrollTo メソッドを使用して、scrollTo に渡される offsetX と offsetY を取得する必要があります。
ジャンプする行にアンカーポイントを追加します

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