Old

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

以前很多博主都写过/转载过用 jQuery 实现页面滚动(Scroll)效果的方法,但目前搜来的方法大都在 Opera 下有个小 Bug:直接用跳的而且画面闪烁。

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

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

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

假设:你的主题最上面的 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(){...}); 这是滚动基本代码,可以根据自个情况变通,也就是举一反三了,如:既然可以返回顶部,那么就可以滚动到底部、滚动到某一个 id、滚动到中间……

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

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

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

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

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

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

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

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

zww
or
oooo

声明: 除非注明,ZWWoOoOo文章均为原创,转载请以链接形式标明本文地址
本文地址: https://zww.me/archives/25144

101 comments

  1. pazz7ven pazz7ven Internet Explorer 8 Internet Explorer 8 Windows XP Windows XP

    哈哈 沙发

    沙发
  2. 久酷 久酷 Firefox 3 Firefox 3 Windows 7 Windows 7

    我顶

    板凳
  3. bolo bolo Firefox 3 Firefox 3 Windows XP Windows XP

    jQuery有个滚动插件,貌似2k,功能很完善

    地板
  4. ......
  5. evlos evlos Google Chrome 5 Google Chrome 5 Windows XP Windows XP

    强烈要求浏览器内置 jQuery 库 ~ :grin:

    41楼
  6. 一心而已 一心而已 TheWorld Browser TheWorld Browser Windows XP Windows XP

    看不太懂

    42楼
  7. yulutimes yulutimes Google Chrome 4 Google Chrome 4 Windows 7 Windows 7

    学习一下

    43楼
  8. 杭州SEO 杭州SEO Internet Explorer 8 Internet Explorer 8 Windows XP Windows XP

    学习了

    44楼
  9. deja.vu deja.vu Opera 10 Opera 10 Windows XP Windows XP

    效果不错~~

    还有中间的滚动箭头也不错。。 呵呵

    45楼
  10. deja.vu deja.vu Opera 10 Opera 10 Windows XP Windows XP

    请问一下这个“ 提交成功, 刷新頁面之前可以再編輯”是怎么实现的啊?

    看样子不是插件。。很好用。。

    46楼
  11. 球犯 球犯 Google Chrome 4 Google Chrome 4 Windows XP Windows XP

    又看了一遍,发现我还是不懂呗。。。。失败 :oops: :oops: :oops:

    47楼
    • zwwooooo zwwooooo Firefox 3 Firefox 3 Windows 7 Windows 7

      @球犯 囧~1. 加载jq库 2.把第一个jq代码存为js文件并加载 3.给要点击滚动的地方加入id/class(跟jq里面的id/class相同) 4.编写css

  12. fin fin Google Chrome 5 Google Chrome 5 Windows 7 Windows 7

    :razz: :razz: 你这个页面的回到顶部和底部的实在是太帅了。。。

    48楼
    • zwwooooo zwwooooo Firefox 3 Firefox 3 Windows 7 Windows 7

      @fin 哈哈,评论的时候、无聊的时候就点一点

  13. 博百优 博百优 Google Chrome 6 Google Chrome 6 Windows 7 Windows 7

    看了,感觉可以,不过暂时不加这个功能

    49楼
  14. 无冷 无冷 Google Chrome 10 Google Chrome 10 Windows 7 Windows 7

    这段是滚到top的嘛,$body的设定,我也是最近几天才学的

    50楼
  15. sprityaoyao sprityaoyao Firefox 4 Firefox 4 Windows XP Windows XP

    原来这一句是为了解决opera下的BUG,没用过opera,现在知道了。

    51楼
  16. 额we 额we Google Chrome 14 Google Chrome 14 Windows 7 Windows 7

    不知道能不能在下拉的时候才出现 向上的指示。。

    52楼
    • zwwooooo zwwooooo Firefox 7 Firefox 7 Windows 7 Windows 7

      @额we
      可以,你可以搜一下

    • 额we 额we Google Chrome 14 Google Chrome 14 Windows 7 Windows 7

      @zwwooooo
      我是说在你上面的代码实现,不是用其他jq插件,不知道可不可以。

    • 额we 额we Google Chrome 14 Google Chrome 14 Windows 7 Windows 7

      @zwwooooo
      就是以你上面的代码为基础, 不知道能不能实现,

    • zwwooooo zwwooooo Firefox 7 Firefox 7 Windows 7 Windows 7

      @额we
      只要会点jQ就会,我是懒得折腾了,你看看手册吧。

  17. lw lw Firefox 9 Firefox 9 Windows 7 Windows 7

    看看效果,是不是我想要的

    53楼
  18. Normal Normal Firefox 11 Firefox 11 Windows 7 Windows 7

    jquery对我来说好难啊。。

    54楼
  19. jack jack Internet Explorer 9 Internet Explorer 9 Windows 7 Windows 7

    看看是否能解决屏幕闪烁问题

    55楼
  20. ghostry ghostry Google Chrome 23 Google Chrome 23 Windows 7 Windows 7

    很不错.用上看看.

    56楼
  21. fond de commerce fond de commerce Firefox 22 Firefox 22 Windows 7 Windows 7

    没有完整代码,
    要自己慢慢试试了
    多谢

    57楼
  22. sniper sniper Google Chrome 51 Google Chrome 51 Mac OS X 10.11 Mac OS X 10.11

    点击第二次或以后才有滚动效果,第一次点击没作用。如何解决这个问题?

    58楼
    • zwwooooo zwwooooo Firefox 47 Firefox 47 Windows 10 Windows 10

      @sniper 不是很清楚你的结构,如果只是滚动到顶部,你可以试试把 $('#header').offset().top 改为 0

Leave a Reply