jQuery实现平滑滚动到指定锚点的方法


Posted in Javascript onMarch 20, 2015

本文实例讲述了jQuery实现平滑滚动到指定锚点的方法。分享给大家供大家参考。具体如下:

定义好指定的anchor锚点,调用下面的js代码可以让页面平滑的滚动到指定的位置,非常实用,比如返回页面顶部,去往页面底部等功能

// HTML:
// <h1 id="anchor">Lorem Ipsum</h1>
// <p><a href="#anchor" class="topLink">Back to Top</a></p>
$(document).ready(function() {
  $("a.topLink").click(function() {
    $("html, body").animate({
      scrollTop: $($(this).attr("href")).offset().top + "px"
    }, {
      duration: 500,
      easing: "swing"
    });
    return false;
  });
});

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
js下用层来实现select的title提示属性
Feb 23 Javascript
简单的前端js+ajax 购物车框架(入门篇)
Oct 29 Javascript
jquery 插件学习(三)
Aug 06 Javascript
BootStrap3学习笔记(一)之网格系统
May 20 Javascript
js的各种排序算法实现(总结)
Jul 23 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
Dec 24 Javascript
JS实现移动端点击按钮复制文本内容
Jul 28 Javascript
vue点击当前路由高亮小案例
Sep 26 Javascript
JavaScript cookie原理及使用实例
May 08 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
Sep 02 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
Sep 16 Javascript
JavaScript严格模式不支持八进制的问题讲解
Nov 07 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
Mar 20 #Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 #Javascript
JavaScript控制图片加载完成后调用回调函数的方法
Mar 20 #Javascript
jQuery UI插件自定义confirm确认框的方法
Mar 20 #Javascript
js使用split函数按照多个字符对字符串进行分割的方法
Mar 20 #Javascript
原生Js实现简易烟花爆炸效果的方法
Mar 20 #Javascript
Javascript调用函数方法的几种方式介绍
Mar 20 #Javascript
You might like
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
php计算函数执行时间的方法
2015/03/20 PHP
codeigniter发送邮件并打印调试信息的方法
2015/03/21 PHP
php设计模式之单例模式代码
2016/06/11 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
PHP中quotemeta()函数的用法讲解
2019/04/04 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
简略说明Javascript中的= =(等于)与= = =(全等于)区别
2013/04/16 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
2013/04/26 Javascript
Extjs实现进度条的两种便捷方式
2013/09/26 Javascript
javascript实现数字验证码的简单实例
2014/02/10 Javascript
浅谈Javascript 数组与字典
2015/01/29 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
2016/04/25 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
jQuery Ajax实现跨域请求
2017/01/21 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
JS实现的自定义map方法示例
2019/05/17 Javascript
Python3写入文件常用方法实例分析
2015/05/22 Python
使用Python的turtle模块画图的方法
2017/11/15 Python
从列表或字典创建Pandas的DataFrame对象的方法
2019/07/06 Python
使用Python的networkx绘制精美网络图教程
2019/11/21 Python
Python运行提示缺少模块问题解决方案
2020/04/02 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
CSS+jQuery+PHP+MySQL实现的在线答题功能
2015/04/25 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
2018/09/17 HTML / CSS
澳大利亚UGG工厂直销:Australian Ugg Boots
2017/10/14 全球购物
印度尼西亚值得信赖的第一家网店:Bhinneka
2018/07/16 全球购物
投标保密承诺书
2014/05/19 职场文书
党建工作经验交流材料
2014/05/25 职场文书
党的群众路线教育实践活动总结材料
2014/10/30 职场文书
酒店辞职书范文
2015/02/26 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
javascript数组includes、reduce的基本使用
2021/07/02 Javascript