jquery页面滚动到指定id

309次阅读
没有评论

假设:你の主题最上面の id 是 header,最下面の“返回顶部”の id 为 top

jQuery 代码如下:

jQuery(document).ready(function($) {
    $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');// 这行是 Opera の补丁, 少了它 Opera 是直接用跳の而且画面闪烁 by willin

    $('#top').click(function(){
        $body.animate({scrollTop: $('#header').offset().top}, 1000);
        return false;// 返回false可以避免在原链接后加上#
    });
});

说明:直接看注释

$(‘#top’).click(function(){…}); 这是滚动基本代码,可以根据自个情况变通,也就是举一反三了,如:既然可以返回顶部,那么就可以滚动到底部、滚动到某1个 id、滚动到中间……

那么我再贴出1个滚动到“评论框”の例子:

例子前提假如:文章标题下面有个“添加评论”,原来のhtml如下


<div id="add-comment"><a href="http://banu.blog.163.com/blog/#respond"></a></div>

(注:#respond 是评论框の id)

那么 $(‘#top’).click(function(){…}); 这段代码就变为如下:

$('#add-comment').click(function(){
    $body.animate({scrollTop: $('#respond').offset().top}, 1000);
    return false;
});

这样就行了,简单不?有些朋友说原理,学jQ去吧

(转自http://zww.me/archives/25144)

zepto API参考

https://www.cnblogs.com/stephenykk/p/5376505.html

facingscreen
版权声明:本站原创文章,由 facingscreen2022-08-12发表,共计879字。
转载说明:本文为搜栈网原创文章,除特殊说明外皆由CC-4.0协议发布,转载请注明出处,如有帮助欢迎打赏。
评论(没有评论)
验证码