HTML点击按钮定位div锚点的多种使用方法

HTML和JS点击按钮滚动定位到页面指定的锚点位置的使用方法，本文列举了两个实例代码，可供开发者学习

方法一：通过HTML的href链接实现滚动定位到页面指定锚点位置

最常用也是最简单的是html代码中a标签的href链接到指定位置，平常href常用于链接跳转，我们可以把链接地址换成“#+ID位置”，这样的的代码最为简单，也比较适用，参考代码如下：

需要跳转的按钮：

<a href="#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="www.360mb.net”表示的是重新定向，页面跳转

到新的页面。也可以通过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