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正则表达式中test,exec,match方法的区别说明
Jan 29 Javascript
jquery获取tr并更改tr内容示例代码
Feb 13 Javascript
js的Prototype属性解释及常用方法
May 08 Javascript
JS 实现列表与多选框选择附预览动画
Oct 29 Javascript
JS实现根据密码长度显示安全条功能
Mar 08 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
Oct 11 Javascript
JavaScript模块模式实例详解
Oct 25 Javascript
基于element-ui的rules中正则表达式
Sep 04 Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 Javascript
原生JavaScript之es6中Class的用法分析
Feb 23 Javascript
JavaScript编写开发动态时钟
Jul 29 Javascript
详解vue3.0 的 Composition API 的一种使用方法
Oct 26 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
人工智能开始玩《星际争霸2》 你的操作跟得上吗?
2017/08/11 星际争霸
用php过滤危险html代码的函数
2008/07/22 PHP
php5.x禁用eval的操作方法
2018/10/19 PHP
javascript实现table选中的行以指定颜色高亮显示的方法
2015/05/13 Javascript
jquery trigger实现联动的方法
2016/02/29 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
AngularJs上传前预览图片的实例代码
2017/01/20 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
微信小程序多张图片上传功能
2017/06/07 Javascript
vue-cli之router基本使用方法详解
2017/10/17 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
解决vue数组中对象属性变化页面不渲染问题
2018/08/09 Javascript
jQuery属性选择器用法实例分析
2019/06/28 jQuery
微信小程序事件 bindtap bindinput代码实例
2019/08/26 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
使用Karma做vue组件单元测试的实现
2020/01/16 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
2020/11/10 Javascript
Python 中pandas.read_excel详细介绍
2017/06/23 Python
深入浅析Python传值与传址
2018/07/10 Python
python 自动去除空行的实例
2018/07/24 Python
python 批量修改/替换数据的实例
2018/07/25 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
Python多项式回归的实现方法
2019/03/11 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
局域网标准
2016/09/10 面试题
JPA的优势都有哪些
2013/07/04 面试题
档案管理员岗位职责
2013/12/01 职场文书
自荐书范文范例
2014/02/13 职场文书
管事部库房保管员岗位职责
2014/02/21 职场文书
租房合同协议书
2014/04/09 职场文书
安全演讲稿大全
2014/05/09 职场文书
民主评议政风行风整改方案
2014/09/17 职场文书
市场部岗位职责范本
2015/04/15 职场文书
同学聚会通知短信
2015/04/20 职场文书
详解Go语言运用广度优先搜索走迷宫
2021/06/23 Python