jquery实现点击链接滚动到指定位置

最新推荐文章于 2024-07-01 10:42:12 发布

Buddha_ITXiong

最新推荐文章于 2024-07-01 10:42:12 发布

阅读量762

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/Buddha_ITXiong/article/details/89674960

版权

javascript 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

效果图：点击左边导航，右边内容滚动到相对应区域

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{margin: 0;padding: 0;}
    body{background-color: #ccc;}
    .container{width: 1000px;margin: 0 auto;overflow: hidden;}
    .left{width: 200px;float: left;height: auto;padding: 20px 0;}
    .left .item{width: 100%;height: 60px;line-height: 60px;list-style-type: none;text-align: center;background-color: #fff;margin-bottom: 10px;cursor: pointer;}
    .left .active{background-color: cyan;color: white;}
    .right{width: 760px;height: 400px;min-height: 800px;float:left;margin-left: 40px;background-color: white;overflow: scroll;padding-top: 25px;}
    .right .box{height: 500px;line-height: 500px;text-align: center;font-size: 32px;color: white;}
    .right .box1{background-color: antiquewhite;}
    .right .box2{background-color: rebeccapurple;}
    .right .box3{background-color: aquamarine;}
    .right .box4{background-color: sienna;}
    .right .box5{background-color: darkgoldenrod;}
</style>
<body>
<div class="container">
    <ul class="left" id="left-box">
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
    </ul>
    <div class="right" id="right-box">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <div class="box box4">4</div>
        <div class="box box5">5</div>
    </div>
</div>
</body>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
    $("#left-box").on("click",'.item',function(){
        var index = $(this).index();
        scrollToLocation(index);
    });

    function scrollToLocation(index) {
        index = parseInt(index);
        var mainContainer = $('#right-box');
        var scrollToContainer = mainContainer.find('.box').eq(index);
        mainContainer.animate({
            scrollTop: scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()
        }, 200);
    }
</script>
</html>

Buddha_ITXiong

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery实现点击链接滚动到指定位置

效果图：点击左边导航，右边内容滚动到相对应区域代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> *{margi...
复制链接

扫一扫

专栏目录