设置锚点切换实例

来源：互联网发布：怎样学好算法编辑：程序博客网时间：2024/05/21 14:04

这里写图片描述
（图一）

（图二）

如上图所示，这里实现一个功能。

1-单击“跳转链接A”，”跳转链接A”添加红色字体样式，页面滚动到A basic位置;
2-单击“跳转链接B”，”跳转链接B”添加红色字体样式，页面滚动到B high位置;
3-页面滚动到A basic位置，跳转链接A添加红色字体样式。
4-页面滚动到B high位置，跳转链接B添加红色字体样式。

代码如下所示：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <meta name="viewport" content="width=device-width, initial-scale=1.0">        <title>锚点测试</title>    </head>    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>    <script>        $(function(){            window.onscroll=function(){      //页面滚动的时候                var elm1=$("#basic")[0];                var elm2=$("#high")[0];                var scrolltop = Math.ceil(document.documentElement.scrollTop ||document.body.scrollTop);                if (scrolltop >= 0 && scrolltop < elm2.offsetTop-$(".nav").height()) {                    $(".nav  li a").removeClass("on");                    $(".basic a").addClass("on");                }                if (scrolltop >= elm2.offsetTop-$(".nav").height()) {                    $(".nav  li a").removeClass("on");                    $(".high a").addClass("on");                }            }            window.onload=function (){       //页面加载的时候                if (window.location.hash=="#basic") {                    window.location.hash = "";                    window.location.hash="basic"                }else if(window.location.hash=="#high"){                    window.location.hash = "";                    window.location.hash="high"                }else{                    window.location.hash = "";                    window.location.hash="#basic"                }            }        })    </script>        <style type="text/css">            li{                display: block;                margin-bottom: 4px;                width: 100px;                height: 20px;                background: #eee;                text-align: center;            }            .on{                color: red;            }        </style>    <body>        <div class="nav" style="display: flex;display: -webkit-flex;flex-direction: row;justify-content: space-between;position: fixed;margin: 0px 0px;">            <li>                <div class="basic">                    <a href="#basic">跳转链接A</a>                </div>            </li>            <li>                <div class="high">                    <a href="#high">跳转链接B</a>                </div>            </li>        </div>        <ul  id="basic">            <li></li><li></li>            <li>A basic</li>            <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>            <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>            <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>        </ul>        <ul  id="high">            <li></li><li></li>            <li>B high</li>            <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>            <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>            <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>        </ul>    </body></html>

感觉动画看起来特别生硬，这里我们加入一段ＪＳ代码

$(document).ready(function() {                $(".nav a").click(function() {                    $("html, body").animate({                        scrollTop: $($(this).attr("href")).offset().top + "px"                    }, {                        duration: 500,                        easing: "swing"                    });                    return false;                });            });

加入ＪＳ以后明显感觉体验好多了。

0 0