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 相关文章推荐
javascript中利用数组实现的循环队列代码
Jan 24 Javascript
根据配置文件加载js依赖模块
Dec 29 Javascript
10个很棒的jQuery代码片段
Sep 24 Javascript
在页面中输出当前客户端时间javascript实例代码
Mar 02 Javascript
Bootstrap栅格系统学习笔记
Nov 25 Javascript
JS使用cookie实现只出现一次的广告代码效果
Apr 22 Javascript
webpack2.0配置postcss-loader的方法
Aug 17 Javascript
使用vue制作探探滑动堆叠组件的实例代码
Mar 07 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
Feb 11 Javascript
Angular 多模块项目构建过程
Feb 13 Javascript
vue 实现超长文本截取,悬浮框提示
Jul 29 Javascript
微信小程序实现左滑删除效果
Nov 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
Wordpress php 分页代码
2009/10/21 PHP
实用PHP会员权限控制实现原理分析
2011/05/29 PHP
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
jQuery 学习6 操纵元素显示效果的函数
2010/02/07 Javascript
JS实现静止元素自动移动示例
2014/04/14 Javascript
NodeJS制作爬虫全过程(续)
2014/12/22 NodeJs
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
Javascript中常用的检测方法小结
2016/10/08 Javascript
常用原生js自定义函数总结
2016/11/20 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
js仿小米手机上下滑动效果
2017/02/05 Javascript
javascript 秒表计时器实现代码
2017/03/09 Javascript
微信小程序开发摇一摇功能
2019/11/22 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
详细解读Python中的__init__()方法
2015/05/02 Python
Python中list查询及所需时间计算操作示例
2018/06/21 Python
Python线性拟合实现函数与用法示例
2018/12/13 Python
Python从列表推导到zip()函数的5种技巧总结
2019/10/23 Python
TENSORFLOW变量作用域(VARIABLE SCOPE)
2020/01/10 Python
关于HTML5的安全问题开发人员需要牢记的
2012/06/21 HTML / CSS
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
聚网科技C++面试笔试题
2015/09/01 面试题
运动会领导邀请函
2014/01/10 职场文书
专业技术职务聘任书
2014/03/29 职场文书
实践单位评语
2014/04/26 职场文书
保研专家推荐信范文
2015/03/25 职场文书
开会通知
2015/04/20 职场文书
道歉信范文
2015/05/12 职场文书
教师读书活动心得体会
2016/01/14 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书
vue router 动态路由清除方式
2022/05/25 Vue.js