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

很多博主都写过/转载过用 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 的幾種方法

http://www.cnblogs.com/yangbo108/archive/2007/08/29/874014.html

http://fluagen.blog.51cto.com/146595/405607

https://www.google.com.hk/search?newwindow=1&safe=strict&espv=210&es_sm=93&q=jquery%E6%8E%A7%E5%88%B6%E6%BB%9A%E5%8A%A8%E6%9D%A1%E4%BD%8D%E7%BD%AE&oq=jquery+%E6%8E%A7%E5%88%B6%E6%BB%9A%E5%8A%A8&gs_l=serp.3.1.0i12i2l2j0.219064.224947.0.227462.18.16.0.0.0.1.587.2206.3-3j0j2.5.0....0...1c.1j4.32.serp..14.4.1661.TCjxvjyOT3U

[转]用 jQuery 实现页面滚动(Scroll)效果的完美方法的更多相关文章

  1. js原生 + jQuery实现页面滚动字幕

    js原生/jQuery实现页面滚动字幕效果 17:45:49 在新闻列表或者文章列表信息等页面中很容易要求实现字幕滚动的效果,以下为简单的实现页面中滚动字幕的效果 1.jQuery实现页面滚动字幕效果 ...

  2. js和jquery实现页面滚动监听

    js和jquery实现页面滚动监听 一.总结 一句话总结:onscroll方法和监听页面元素的高度都可以实现滚动监听. 1.onscroll方法实现滚动监听的核心代码是什么? <body ons ...

  3. ScrollMagic – 酷毙了!超炫的页面滚动交互效果

    ScrollMagic 是一款 jQuery 插件,它让你可以像使用进度条一样使用滚动条.如果你想在特定的滚动位置开始一个动画,并且让动画同步滚动条的动作,或者把元素粘在一个特定的滚动位置,那么这款插 ...

  4. jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 基于jQuery实现页面滚动时顶部导航显示隐藏效果

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  6. JQuery实战——页面进度条效果

    今早逛阮一峰大神的博客 ECMAScript 6 入门 时候看到页面顶部有个进度条显示当前浏览的进度,如图: 顶部进度条会根据当前页面高度进行宽度调整,实战一番,视觉使用animated方法实现.下面 ...

  7. [jquery]判断页面滚动到顶部和底部(适用于手机web加载)

    //判断页面滚动到顶部和底部 $(window).scroll(function(){ var doc_height = $(document).height(); var scroll_top = ...

  8. jquery判断页面滚动条(scroll)是上滚还是下滚

    单纯判断滚动条方向 function scroll( fn ) { var beforeScrollTop = document.body.scrollTop, fn = fn || function ...

  9. jquery “做页面滚动到某屏时改变状态标题” 所用知识点记录

    浏览器滚动条滚动时触发事件 //浏览器滚动条滚动时触发事件 $(window).scroll(function(){}); 浏览器窗口大小改变时触发事件 //浏览器窗口大小改变时触发事件 $(wind ...

随机推荐

  1. Educational Codeforces Round 41 (Rated for Div. 2)

    这场没打又亏疯了!!! A - Tetris : 类似俄罗斯方块,模拟一下就好啦. #include<bits/stdc++.h> #define fi first #define se ...

  2. sorted()排序详解

    sorted()排序详解     http://wiki.python.org/moin/HowTo/Sorting?highlight=%28howto%29#The_Old_Way_Using_t ...

  3. 高能天气——团队Scrum冲刺阶段-Day 7 总结

    高能天气--团队Scrum冲刺阶段-Day 7 总结 今日完成任务 于欣月:修改项目说明书,帮助修改应用 余坤澎:进行应用整合的收尾工作 康皓越:进行应用整合的收尾工作 范雯琪:修改项目说明书,完成项 ...

  4. 004.Zabbix3.x-Server服务端安装

    一 环境基础 1.1 部署基础环境 部署Zabbix需要LAMP或LANP环境,数据库可以为MySQL或者MariaDB.硬件及存储条件按需配置. 1.2 常见依赖列表 Web前端需要支持的软件环境如 ...

  5. 001.Postfix简介

    一 简介 postfix是Wietse Venema在IBM的GPL协议之下开发的MTA(邮件传输代理)软件.Postfix提供更快.更容易管理.更安全,同时还与 sendmail保持足够的兼容性,是 ...

  6. linux Shell 脚本编写

    1. http://www.jb51.net/article/28514.htm 2. http://www.runoob.com/linux/linux-shell.html

  7. Android-Kotlin在Fragment获取View

    Android-Kotlin在Fragment获取View Overview 在使用Fragment的时候,使用了ButterKnife 来获取View但是一直出错,后来就直接使用Kotlin的导入布 ...

  8. [ 转载 ] Http详解

    HTTP简介 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文本到本地浏览器的传送 ...

  9. ARM DEBUGGER FOR NEARLY ONE DOLLAR

    http://hackaday.com/2014/01/23/arm-debugger-for-nearly-one-dollar/ Oh that title is so misleading. B ...

  10. 使用Edge模式通知Internet Explorer以最高级别的可用模式显示内容

    一.EasyUI$的window('open')在IE8下兼容性问题 今天在公司使用EasyUI的$('#win').window('open');方法打开一个window窗体时发现EaysUI的脚本 ...