用 jQuery 实现页面滚动（Scroll）效果的完美方法-js教程-PHP中文网

用 jQuery 实现页面滚动（Scroll）效果的完美方法

巴扎黑

发布： 2017-06-29 09:39:06

原创

2075人浏览过

以前很多博主都写过/转载过用 jquery 实现页面滚动（scroll）效果的方法，但目前搜来的方法大都在 opera 下有个小 bug：直接用跳的而且画面闪烁。

今天，超级低调的高手 Willin 共享了一种完美方法解决 jQuery 实现滚动效果在 Opera 下的bug，我随即调试+应用到我目前的主题，目前经过测试非常完美，特意贴出代码加以说明。

因为本人不太懂 js，jQuery 也只是皮毛，原理方面我说不清楚，只能说明修改方法。

演示：点击现在的主题 zOM 底部的“Δ”/文章页面标题下面的“x comments” “Leave a comment”

假设：你的主题最上面的 id 是 header，最下面的“返回顶部”的 id 为 top

jQuery 代码如下：

document$

 windowopera ? documentcompatMode   ? $ $ $

$
scrollTop $top 
 false

登录后复制

说明：直接看注释

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

那么我再贴出一个滚动到“评论框”的例子：

知我AI

一款多端AI知识助理，通过一键生成播客/视频/文档/网页文章摘要、思维导图，提高个人知识获取效率；自动存储知识，通过与知识库聊天，提高知识利用效率。

101

例子前提假如：文章标题下面有个“添加评论”，原来的html如下

<p id="add-comment"><a href="#respond"></a></p>

登录后复制

（注：#respond 是评论框的 id）

那么 $('#top').click(function(){...}); 这段代码就变为如下：

$
scrollTop $top 
 false

登录后复制

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

更多的方法去 Willin 的《頁面 Scroll 的幾種方法》

声明: 本文采用 BY-NC-SA 协议进行授权 | ZWWoOoOo
转载请注明转自《用 jQuery 实现页面滚动（Scroll）效果的完美方法》

阅读全文
类别：Javascript 查看评论

以上就是用 jQuery 实现页面滚动（Scroll）效果的完美方法的详细内容，更多请关注php中文网其它相关文章！

大家都在看：