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

最新推荐文章于 2023-06-01 18:47:46 发布

chenqiong1991

最新推荐文章于 2023-06-01 18:47:46 发布

阅读量354

点赞数

分类专栏：学习笔记 jquery插件学习笔记文章标签： jquery插件

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

版权

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

45 篇文章 2 订阅

订阅专栏

jquery插件学习笔记

12 篇文章 0 订阅

订阅专栏

写在前面

放假了。放松一天。虽然也没干什么事。三天的假期：过完一天是一天。呵呵。
把昨天的代码稍微改了一下，使其更符合自己的逻辑，毕竟原文中的page-scroll的自定义属性是个什么鬼（os：HTML的标签的属性可以自定义的吗？不知道。以后会知道的）。直接用id来定位元素了。

代码

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

    });

直接用id属性来定位元素。但在用jquery选择器的时候需要在前面加个#符号。所以用了$("#"+scrollToDom),这样可以直接访问id属性为scrollToDom的元素。所以，删除了每个a标签的page-scroll属性，我认为那是没必要的。可能我还暂时体会不到作者的机智。哪一天回头看今天的笔记，肯定会呵呵的–NAVI。。。

好了代码全文

<!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("id");
                //$(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插件开发学习笔记（七）——页面平滑滚动改进

写在前面放假了。放松一天。虽然也没干什么事。三天的假期：过完一天是一天。呵呵。把昨天的代码稍微改了一下，使其更符合自己的逻辑，毕竟原文中的page-scroll的自定义属性是个什么鬼（os：HTML的标签的属性可以自定义的吗？不知道。以后会知道的）。直接用id来定位元素了。代码$(document).ready(function () { jQuery.scrollTo=func
复制链接

扫一扫