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