锚点定位-元素相对父级滚动

最新推荐文章于 2024-12-07 10:59:00 发布

原创最新推荐文章于 2024-12-07 10:59:00 发布 · 843 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何利用JavaScript中的Element.scrollIntoView()方法进行锚点定位，该方法可使元素在父级视口内可见，适用于网页滚动交互设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚点定位-元素相对父级滚动</title>
    <style>
    .link{margin: 100px;}
    .link a{margin: 0 5px;}
    .parent{width: 300px;height: 100px;border: 1px solid #f00;
            margin-left: 100px;background: #999;overflow-y: auto;}
    .child{position: relative;}
    .child1{color: #ff0;word-break:break-all;}
    .child2{color: #f0f;word-break:break-all;}
    .child3{color: #00f;word-break:break-all;}
    .child4{color: #0f0;word-break:break-all;}
    .child5{color: #0ff;word-break:break-all;}
    </style>
</head>
<body>
    <div class="link">
        <a id="c1" href="#">child1</a>
        <a id="c2" href="#">child2</a>
        <a id="c3" href="#">child3</a>
        <a id="c4" href="#">child4</a>
        <a id="c5" href="#">child5</a>
    </div>

    <div class="parent">
        <div class="child">
            <div class="child1">
                沙发child1child1child1child1child1child1
                child1child1child1child1child1child1child1
                child1child1child1child1child1child1child1
                child1child1child1child1child1child1child1
                child1child1child1child1child1child1child1
                child1child1child1child1child1child1child1
                child1child1child1child1child1child1child1
            </div>
            <div class="child2">
                    沙发child2child2child2child2child2child2
                child2child2child2child2child2child2child2
                child2child2child2child2child2child2child2
                child2child2child2child2child2child2child2
            </div>
            <div class="child3">
                    沙发child3child3child3child3child3child3
                child3child3child3child3child3child3child3
            </div>
            <div class="child4">
                    沙发child4child4child4child4child4child4
            </div>
            <div class="child5">
                沙发child5child5child5child5child5child5
                child5child5child5child5child5child5child5
            </div>
        </div>
    </div>

    <script src="jquery-1.9.1.min.js"></script>
    <script>
    
    $('.parent').scroll(function () {
        console.log($(this).scrollTop());
    })
    pointLink($('#c1'),$('.child1'))
    pointLink($('#c2'),$('.child2'))
    pointLink($('#c3'),$('.child3'))
    pointLink($('#c4'),$('.child4'))
    pointLink($('#c5'),$('.child5'))
    
    //ele       需要点击的元素
    //target    需要滚动的目标元素
    function pointLink(ele,target) {
        ele.click(function () {
            //length为目标元素到父级的距离，父级必须要有相对定位
            var length = target.position().top;     
            $('.parent').animate({"scrollTop":length},500);
            return false;       //阻止a标签的默认事件 或用 e.preventDefault();
        })
    }

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