HTML和JS点击按钮滚动定位到页面指定的锚点位置的使用方法,本文列举了两个实例代码,可供开发者学习
方法一:通过HTML的href链接实现滚动定位到页面指定锚点位置
最常用也是最简单的是html代码中a标签的href链接到指定位置,平常href常用于链接跳转,我们可以把链接地址换成“#+ID位置”,这样的的代码最为简单,也比较适用,参考代码如下:
需要跳转的按钮:
<a href="https://www.360mb.net/23209.html#tiaozhuan">跳转按钮</a>
需要跳转到的位置:
<div id="tiaozhuan">将要跳转到这里</div>
方法二:通过点击button按钮使用js实现滑动到页面指定DIV位置
如果我们要点击实现跳转的地方是一个button按钮的话,由于button不能添加href,所以我们只好使用js跳转代码来实现,具体代码示例如下:
演示按钮:
<input type="button" name="Submit" value="提交" onclick="javascript:onTopClick();" />
<div id="tiaozhuan">跳转到的位置</div>
设置js参数:
<script>
function onTopClick() {
window.location.hash = "#tiaozhuan";
}
</script>
上面这段代码,点击提交按钮,将会滚定跳转定位到同一页面id=”tiaozhuan”的div处。这段js点击跳转页面代码实现的原理是:页面各元素赋予唯一ID,点击提交按钮触发js点击事件,js通过ID滚动跳转定位到该元素,window.location.hash = “#tiaozhuan”指的就是定位到当前页面id=”tiaozhuan”的div。
细节说明:
window.location.href表示重定向,后面跟着的是完整的url地址,与其相似的还有window.location.hash,两者区别请查看下方说明:
(1)window.location.href
得到和使用的是完整的url,比如window.location.href=”https://www.360mb.net/www.360mb.net”表示的是重新定向,页面跳转
到新的页面。也可以通过window.location.href得到a标签的完整的href,比如<a href=”#book”>如果使用href,那
么可以得到完整的链接(url)
(2)window.location.hash
得到的是锚链接。相比如href,通过window.location.hash并不会跳转到新的链接,只会在当前链接里面
改变锚链。并且如果有<a href=”https://www.360mb.net/23209.html#book”>通过window.location.hash得不到完整的链接(URL),仅仅得到#book