jquery插件开发学习笔记（六）——页面平滑滚动

最新推荐文章于 2023-06-30 10:29:27 发布

chenqiong1991

最新推荐文章于 2023-06-30 10:29:27 发布

阅读量431

点赞数

分类专栏：学习笔记 jquery插件学习笔记文章标签： jquery插件页面平滑滚动

本文链接：https://blog.csdn.net/chenqiong1991/article/details/68948200

版权

学习笔记同时被 2 个专栏收录

45 篇文章 2 订阅

订阅专栏

jquery插件学习笔记

12 篇文章 0 订阅

订阅专栏

写在前面

看教科书案例。代码抄的。但原代码未实现需求功能。改动之。
现分析之。

关键代码

<div class="scrollnav" id="scrollnav">
    <a href="#" page-scroll="#scrolltoTop" id="scrolltoTop">滑动到顶端</a><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <a href="#" page-scroll="#scrolltoMid" id="scrolltoMid">滑动到中部</a><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <a href="#" page-scroll="#scrolltoEnd" id="scrolltoEnd">滑动到底端</a><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

在原文代码中，每个a标签是没有id的。所以功能未实现。我对每个a标签加上了和page-scroll属性相同的id（去掉了id符号#），功能完美实现。

jQuery.scrollTo=function (scrolldom, scrolltime) {
            $(scrolldom).click(function () {
                var scrollToDom=$(this).attr("page-scroll");                            $('html,body').animate({scrollTop:$(scrollToDom).offset().top},scrolltime);
                return false;
            });
        };
        $.scrollTo("#scrollnav a",1000);

这里定义jquery插件的方式应该是最简单的。对于功能单一的插件，这是最合适的方法。直接将函数添加到jquery库里。
jQuery.plugin_name=function(){ };
定义完，直接调用即可。
$.plugin_name();

代码分析

在定义插件时，即传入两个参数：scrolldom用来指定需要滑动的目标位置，而scrolltime用来指定动画时长。当scrolldom被点击时，定义scrollTopDom来获取a标签的page-scroll属性，这是为了存储当前的对象。然后对body（整个页面）进行动画（animate）。
scrollTop属性为对象的滑动条距离顶端的距离。思路是将body滑动到指定对象，即将该对象的滑动条的上偏移量传给body的scrollTop属性。
有点像绕口令。前提是正确理解scrollTop属性和offset属性。
好吧，我承认，我也是刚刚在十几分钟前才见到这二位仁兄。
但我爱你们！

代码全文

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../lib/jquery/jquery.js"></script>
</head>
<body>
<div class="scrollnav" id="scrollnav">
    <a href="#" page-scroll="#scrolltoTop" id="scrolltoTop">滑动到顶端</a><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <a href="#" page-scroll="#scrolltoMid" id="scrolltoMid">滑动到中部</a><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <a href="#" page-scroll="#scrolltoEnd" id="scrolltoEnd">滑动到底端</a><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

<script>
    $(document).ready(function () {
        jQuery.scrollTo=function (scrolldom, scrolltime) {
            $(scrolldom).click(function () {
                var scrollToDom=$(this).attr("page-scroll");
                //$(this).addClass("thisscroll").siblings().removeClass("thisscroll");
                $('html,body').animate({scrollTop:$(scrollToDom).offset().top},scrolltime);
                return false;
            });
        };
        $.scrollTo("#scrollnav a",1000);

    });
</script>


</body>
</html>

后面还有

慢慢消化。

chenqiong1991

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery插件开发学习笔记（六）——页面平滑滚动

写在前面看教科书案例。代码抄的。但原代码未实现需求功能。改动之。现分析之。关键代码<div class="scrollnav" id="scrollnav"> <a href="#" page-scroll="#scrolltoTop" id="scrolltoTop">滑动到顶端</a> <b
复制链接

扫一扫