html/js定位到锚点(单页hash跳转)

最新推荐文章于 2021-06-20 10:02:44 发布

vcxiaohan2

最新推荐文章于 2021-06-20 10:02:44 发布

阅读量1w

点赞数 1

本文链接：https://blog.csdn.net/u011500781/article/details/50761958

版权

请在这里查看示例 ☞ anchor示例

实现此效果，还有一种使用id的方法，参考：http://qianduanblog.com/post/jquery-plugin-2-jquery-hash-parse-url-hash-and-listen-hashchange.html

<!doctype html>  
<html>  
 <head>  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">  
  <meta name="renderer" content="webkit">  
  <title>demo</title>  
  <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>  
  <style>  
    * {
        margin: 0; padding: 0;
    }  
    a {
        background: yellow;
    }
  </style>  
 </head>  
 <body>  
    <p>触发按钮时，请注意链接的变化</p>
    <a name="a">锚点a</a>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <a name="b">锚点b</a>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <div>一段内容</div>  
    <a href="#a">a标签定位锚点</a>  
    <button class="div1">js定位锚点b(仅单次定位)</button>  
    <button class="div2">js定位锚点a(可多次定位)</button>  
 </body>  
  <script>  
    ;$(function() {                                           
        $('.div1').on('click', function() {  
            window.location.hash="#b";  
        });  
        $('.div2').on('click', function() {  
            window.location.href="#a";  
        });  
    });  
 </script>  
</html>