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 相关文章推荐
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
Jun 05 Javascript
jquery实现弹出窗口效果的实例代码
Nov 28 Javascript
自定义百度分享的分享按钮
Mar 18 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
Jun 21 Javascript
详解Node.Js如何处理post数据
Sep 19 Javascript
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
angularjs实现简单的购物车功能
Sep 21 Javascript
在vue中获取token,并将token写进header的方法
Sep 26 Javascript
vue.js实现的幻灯片功能示例
Jan 18 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
zf框架的数据库追踪器使用示例
2014/03/13 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
tp5.1 框架查询表达式用法详解
2020/05/25 PHP
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
点击隐藏页面左栏或右栏实现js代码
2013/04/01 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
2013/06/12 Javascript
jquery 延迟执行实例介绍
2013/08/20 Javascript
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
js实现圆盘记速表
2015/08/03 Javascript
AngularJS控制器之间的通信方式详解
2016/11/03 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
javascript作用域链与执行环境详解
2017/03/25 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
2017/07/17 jQuery
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
vue-cli常用设置总结
2018/02/24 Javascript
jQuery 导航自动跟随滚动的实现代码
2018/05/30 jQuery
js canvas实现画图、滤镜效果
2018/11/27 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
在Django的通用视图中处理Context的方法
2015/07/21 Python
Django实现全文检索的方法(支持中文)
2018/05/14 Python
windows下添加Python环境变量的方法汇总
2018/05/14 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
Python实现的远程文件自动打包并下载功能示例
2019/07/12 Python
python实现启动一个外部程序,并且不阻塞当前进程
2020/12/05 Python
python实现MySQL指定表增量同步数据到clickhouse的脚本
2021/02/26 Python
CSS3中的clip-path使用攻略
2015/08/03 HTML / CSS
挪威手表购物网站:Klokker
2016/09/19 全球购物
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
莫斯科制造商的廉价皮大衣:Fursk
2020/06/09 全球购物
上海某公司.net方向笔试题
2014/09/14 面试题
编辑个人求职信范文
2013/09/21 职场文书
数控技术学生的自我评价
2014/02/15 职场文书
交通事故调解协议书
2014/04/16 职场文书
小学教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
SQL Server中使用表变量和临时表
2022/05/20 SQL Server