零基础建站培训介绍

当前位置:

jQuery控制滚动条滚动到当前选中的元素位置(附代码)

有学建网站同学在做视频教程网站,一个教程中会有很多节课程,为了方便用户点击,会将所以课程放在视频右侧。这时需要达到用户点击某节课程时,屏幕滚动条自动滚动到选中的链接位置。效果如下图:

jQuery控制滚动条滚动到当前选中的元素位置

要实现点击某个元素后,滚动条自动滚动到选中的元素位置,需要借助JQUERY来帮忙。

下面是jQuery控制滚动条滚动到当前选中的元素位置的代码:


<div class="w-con">
    <ul>
    <li><a href="#">网站搜索框版块制作</a></li>
    <li class="active"><a href="#">LOGO与搜索框排版布局</a></li>
    <li><a href="#">网站导航制作</a></li>
    <li><a href="#">网站导航nav样式控制</a></li>
    </ul>
</div>

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
<!--无动画效果-->
$(".w-con").scrollTop($(".w-con").scrollTop() + $('.active').offset().top - $(".w-con").offset().top);
<!--有动画效果-->
$(".w-con").animate({ scrollTop: $(".w-con").scrollTop() + $('.active').offset().top - $(".w-con").offset().top }, 1000);

</script>

这个代码的效果就是当用户点击这个DIV的某个LI子元素时,会给当前的LI添加 .active ,JQUery检测到这个 active 时,就会控制滚动条自动滚动到这个LI的位置。

以上代码可以根据自己网站需要进行修改,希望对学习怎么建网站的同学有帮助。

发表评论

零基础学建站就到学做网站论坛