常用锚点定位跳转

锚点： 可以让页面定位到某个位置上的点

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .anchor_point{
                height: 800px;
                width: 100%;
                background: aqua;
            }
        </style>
    </head>
    <body>
        <!-- a标签 href属性中写 要跳转div的id
             点击锚点之后浏览器的URL会发生变化 页面会有刷新感-->
        <a href="#jump1"> 跳到锚点</a>
        <div class="anchor_point" id="jump1">锚点</div>
        
        <!-- animate动画滚动效果 -->
        <div class="content">
            <div id="jump2">跳跳跳</div>
        </div>
        
        <!-- Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。
            页面一定要能滚动，这个方法才会生效
        -->
        <div id="jump3">跳啊跳</div>
        
        <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
        <script type="text/javascript">
            $('.content').click(function(){
                $("html, body").animate({
                  scrollTop: $("#jump1").offset().top 
                },500);  
            });
            $('#jump3').click(function(){
                document.querySelector("#jump1").scrollIntoView(); //无滚动效果
                document.querySelector("#jump1").scrollIntoView({ //以平滑的滚动方式滚动
                    block: 'start',
                    behavior: 'smooth' //定义缓动动画  "auto", "instant", 或 "smooth"  默认 "auto"。
                })
            })
            

            
        </script>
    </body>
</html>

 

posted @ 2020-06-29 16:40  戌月十一  阅读(251)  评论(0)    收藏  举报