OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

用jQuery为跳转链接锚点添加平滑滚动动画效果(如回到顶部按钮)


分享到
分类 JS学习   关键字 提问   发布 ourjs  1429688256585
注意 转载须保留原文链接,译文链接,作者译者等信息。  
Only Bolivian Here: 问

我的网页里面有几个链接。单击后可以跳转到相应的内容以帮助用户阅读。

有没有一种方法,使滚动效果更顺畅一点?

比如实现这样的效果:http://www.position-relative.net/creation/anchor/

但是他用了一个自定义的JavaScript库。jQuery能否提供类似这样的效果?


Joseph Silber 答: fiddle 所显示的效果: http://jsfiddle.net/9SDLw/

$('a').click(function(){
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    return false;
});

如果你的元素没有ID,你想用名字来做定位链接,可以使用这个:

$('a').click(function(){
    $('html, body').animate({
        scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
    }, 500);
    return false;
});


为了增强性能,你应该将 $('html, body') 选择器缓存起来。这样每次点击时就不需要再重新查找了

var $root = $('html, body');
$('a').click(function() {
    $root.animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    return false;
});

如果你想更新当前页面的URL。在回调里稍微改一下就可以了:

var $root = $('html, body');
$('a').click(function() {
    var href = $.attr(this, 'href');
    $root.animate({
        scrollTop: $(href).offset().top
    }, 500, function () {
        window.location.hash = href;
    });
    return false;
});
原文地址: 点此
社区评论 ( Beta版 )
  • #0 glen 1429782536218

    列表页咋不加个这样的功能,拉的老长

  • #1 龚专刀 1439200142572

    *

    `

    1. [

    `

    **

    ![

      1.


    ![



    ]1



    ]1


    **

    `

    ]1

    `

    *

OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. NativeScript的工作原理:用JavaScript调用原生API实现跨平台
  2. 6款基于Node.JS的开源内容管理和静态网站生成系统
  3. NativeScript的竞争者React Native:又一个用JavaScript写原生iOS应用的项目
  4. 2015年度开发者调查:JS最流行;ObjC工资最高;最想学Android
  5. Session劫持与Session-ID的安全长度
  6. 用原生HTML5控件实现输入框自动提示(下拉列表补全)功能
  7. 编写高性能HTML网页应用
  8. Image Lazy Load:那些延时加载图片的开源插件(jQuery)
  9. 微软,IBM,ARM等大公司先后加入对Node.js/io.js的支持
  10. 使用Node.JS监听文件夹变化
  11. AirJD-简单好用的免费建站工具

 相关阅读 - JS学习
  1. 用纯css改变下拉列表select框的默认样式
  2. Atom编辑器嵌入Node.JS引擎实践
  3. AngularJS和$scope.$apply()用法的最佳实践
  4. 微软,IBM,ARM等大公司先后加入对Node.js/io.js的支持
  5. 用原生HTML5控件实现输入框自动提示(下拉列表补全)功能
  6. 让我们写快速的JavaScript,JS性能优化小窍门
  7. 通过Web Audio API可视化输出MP3音乐频率波形
  8. 用页面可见性(Page Visibility)API创建用户体验良好的网站
  9. 理解Node.js的事件循环(Event Loop)和线程池
  10. 从一行CSS调试代码中学到的JavaScript知识

 关键字 - 提问
  1. redis、memcache和mongodb各自的优缺点是什么,怎么选择呢?
  2. 在node.js响应流中设置多个Set-Cookie header属性
  3. 用jQuery为跳转链接锚点添加平滑滚动动画效果(如回到顶部按钮)
  4. websvr 静态文件访问问题
  5. websvr 登录session问题
  6. websvr的Template匹配路径问题
  7. ourjs文章缓存问题
  8. 关于ourjs的counts问题
  9. 关于websvr问题
  10. 出几道JS的题:{} + [] = ?

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号