Heim > Web-Frontend > HTML-Tutorial > html点击按钮后,在当前页面跳转_html/css_WEB-ITnose

html点击按钮后,在当前页面跳转_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:16:14
Original
2049 Leute haben es durchsucht

在一个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">
Nach dem Login kopieren

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage