html js点击按钮滚动跳转定位到页面指定位置（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";
       }
    </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.com”表示的是从新定向，页面跳转

到新的页面。也能够经过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.