js锚点

锚点，在地址栏http://localhost:8000/Demo1/js锚点.html#a 跳转到指定位置可以是 <a>标签的name 也可以是标签的id。

曾经看到有锚点的页面，但在代码里看不到name或id为那个锚点的标签，很是费解。在网上一顿查，原来可以使用 window.location.hash 这个便是获取或设置锚点。这难道又是基础不扎实的表现吗？w3school上面是有这东西。

看代码

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>js锚点</title>

    <script src="js/jquery-1.9.1.min.js"></script>

    <script type="text/javascript">

        $(function () {

            $("#demo a").on("click", function () {

                var self = $(this);

                var hash = self.attr("href").split('#')[1];

                window.location.hash = "m-" + hash;

            });

        });

    </script>

</head>

<body>

    <div id="demo">

        <a href="#a">跳转A</a>

        <a href="#b">跳转B</a>

    </div>

    <div style="height: 500px;background-color: #00ced1"></div>

    <div id="m-a" style="height: 200px;background-color: #b6ff00">

    </div>

    <div id="m-b" style="height: 200px;background-color: #808080">

    </div>

</body>

</html>

还有个小问题，地址栏有锚点时 F5刷新页面不会跳转到指定位置，可以这么搞一下。

$(function () {

            var hash = window.location.hash;

            var id = hash.split('#')[1];

            if (id) {

                var t = $('#m-' + id).offset().top;

                $(window).scrollTop(t);

            }

        });

这样就能刷新跳过去了。这个方法还可以改造下，加个动画，点了锚点以后让页面慢慢的走到锚点。

巴特西

js锚点

最新文章

热门文章