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 相关文章推荐
幻宇的层模拟窗口效果-提供演示和下载
Jan 20 Javascript
JavaScript 学习笔记(四)
Dec 31 Javascript
JScript分割字符串示例代码
Sep 04 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
使用D3.js制作图表详解
Aug 13 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
Angular将填入表单的数据渲染到表格的方法
Sep 22 Javascript
判断div滑动到底部的scroll实例代码
Nov 15 Javascript
Node.js文件编码格式的转换的方法
Apr 27 Javascript
微信小程序开发之转发分享功能
Oct 22 Javascript
JS正则表达式验证端口范围(0-65535)
Jan 06 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
CodeIgniter框架数据库事务处理的设计缺陷和解决方案
2014/07/25 PHP
PHP实现简单爬虫的方法
2015/07/29 PHP
PHP+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
PHP 实现手机端APP支付宝支付功能
2018/06/07 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
实现超用户体验 table排序javascript实现代码
2009/06/22 Javascript
js AspxButton的客户端操作
2009/06/26 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
2011/10/21 Javascript
jquery zTree异步加载简单实例分享
2013/02/05 Javascript
javascript定时变换图片实例代码
2013/03/17 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
javascript对象的相关操作小结
2016/05/16 Javascript
jquery获取form表单input元素值的简单实例
2016/05/30 Javascript
浅谈JavaScript 浏览器对象
2016/06/03 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
关于Vue Webpack2单元测试示例详解
2017/08/14 Javascript
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
angularJs select绑定的model取不到值的解决方法
2018/10/08 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
2020/09/04 Javascript
python脚本监控docker容器
2016/04/27 Python
使用Python的Dataframe取两列时间值相差一年的所有行方法
2018/07/10 Python
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
司机辞职报告范文
2014/01/20 职场文书
舞蹈比赛获奖感言
2014/02/04 职场文书
汽车销售员岗位职责
2015/04/11 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
个人合作协议范本
2015/08/06 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python