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

来源：互联网发布：佰斯纳特淘宝编辑：程序博客网时间：2024/05/16 14:38

写在前面

放假了。放松一天。虽然也没干什么事。三天的假期：过完一天是一天。呵呵。
把昨天的代码稍微改了一下，使其更符合自己的逻辑，毕竟原文中的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>

晚安。

0 0