htmljs点击按钮滚动跳转定位到页⾯指定位置(DIV)的⽅法代
码
⼀:通过html锚点实现滚动定位到页⾯指定位置(DIV):
如果我们要点击实现跳转的地⽅是⼀个html锚点,也就是点击⼀个A标签超链接实现跳转,可以把A标签的href属性直接指向跳转指定位置的div,代码实现思路如下:
<a class="banner" href="/schoolFair/registration#nav">
<a href="#abc">点击跳转</a>
<div id="abc">将要跳转到这⾥</div>
⼆:通过点击button按钮使⽤js实现滚定跳转到页⾯指定位置(DIV):
如果我们要点击实现跳转的地⽅是⼀个button按钮的话,由于button不能添加href,所以我们只好使⽤js跳转代码来实现,具体代码⽰例如下:
<script>
function onTopClick() {
window.location.hash = "#abc";
html href属性}
</script>
<input type="button" name="Submit" value="提交" onclick="javascript:onTopClick();" />
<div id="abc">跳转到的位置</div>
上⾯这段代码,点击提交按钮,将会滚定跳转定位到同⼀页⾯id="abc"的div处。这段js点击跳转页⾯代码实现的原理是:页⾯各元素赋予唯⼀ID,点击提交按钮触发js点击事件,js通过ID滚动跳转定位到该元素,window.location.hash = "#abc"指的就是定位到当前页⾯
id="abc"的div。
综:window.location.href表⽰重定向,后⾯跟着的是完整的url地址,与其相似的还有window.location.hash,
下⾯来⽐较window.location.href和window.locaiton.hash的区别。
(1)window.location.href
得到和使⽤的是完整的url,⽐如window.location.href="www.baidu”表⽰的是重新定向,页⾯跳转
到新的页⾯。也可以通过window.location.href得到a标签的完整的href,⽐如<a href="#book">如果使⽤href,那
么可以得到完整的链接(url)
(2)window.location.hash
得到的是锚链接。相⽐如href,通过window.location.hash并不会跳转到新的链接,只会在当前链接⾥⾯
改变锚链。并且如果有<a href="#book">通过window.location.hash得不到完整的链接(URL),仅仅得到#book.
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论