页面锚点定位方法

实现:点击锚点跳转到相应DIV的问题

方法一:

实现方式:用a标签,在href属性中写入DIV的id
缺点:点击锚点之后,浏览器的URL会发生变化,如果刷新可能会出现问题。

方法二:

实现方式:在js事件中通过window.location.hash="divId"跳转,但地址也会发生变化,跟第一种方法没多大区别,甚至更麻烦。

方法三:

实现方式:用animate属性,当点击锚点后,页面滚动到相应的DIV
优势:URL地址不会变,同时点击锚点时会自动响应scroll事件,不需要重新绑定。
缺点:如果页面复杂的话,偏移值可能会发生变化需要算法辅助。

此方法示例:

<!--以下这一段适用于方法一的锚点实现-->
<!DOCTYPE  html>
<html>
<head>
    <style>
        div {
            height: 800px;
            width: 400px;
            border: 2px solid black;
        }
        h2 {
            position: fixed;
            margin:50px  500px;
        }
    </style>
</head>
<body>
    <h2>
        <a href="#div1">to div1</a>
        <a href="#div2">to div2</a>
        <a href="#div3">to div3</a>
    </h2>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
</body>
</html>
// An highlighted block
$(document).ready(function() {
    $("#div1Link").click(function() {
        $("html, body").animate({
            scrollTop: $("#div1").offset().top }, {duration: 500,easing: "swing"});
        return false;
    });
    $("#div2Link").click(function() {
        $("html, body").animate({
            scrollTop: $("#div2").offset().top }, {duration: 500,easing: "swing"});
        return false;
    });
    $("#div3Link").click(function() {
        $("html, body").animate({
            scrollTop: $("#div3").offset().top }, {duration: 500,easing: "swing"});
        return false;
    });
});

方法四:(推荐推荐推荐!!!!!)

实现方式:用js的srollIntoView方法,直接用:
document.getElementById(“divId”).scrollIntoView();
优势:URL不会变,同时能够响应相应的scroll事件,不需要算法

此方法示例:云平台op,运营活动模块
先看下实现效果
在这里插入图片描述
代码实现:(右边?菜单列表)
在这里插入图片描述
代码实现:(左边?各类型展示)
在这里插入图片描述
代码实现:(这是核心重点!)
在这里插入图片描述

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页