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滚动条多种样式,推荐
Feb 05 Javascript
用prototype实现的简单小巧的多级联动菜单
Mar 24 Javascript
一句话JavaScript表单验证代码
Aug 02 Javascript
jquery URL参数判断,确定菜单样式
May 31 Javascript
js 返回时间戳所对应的具体时间
Jul 20 Javascript
JavaScript知识点总结(十)之this关键字
May 31 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
Jan 08 Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 Javascript
微信小程序实现简单表格
Feb 14 Javascript
Nuxt.js 数据双向绑定的实现
Feb 17 Javascript
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
js实现简单图片拖拽效果
Feb 22 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
PHPAnalysis中文分词类详解
2014/06/13 PHP
php获取网页中图片、DIV内容的简单方法
2014/06/19 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
php从数组中随机选择若干不重复元素的方法
2015/03/14 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
Laravel 5+ .env环境配置文件详解
2020/04/06 PHP
offsetParent 算法分析
2010/04/05 Javascript
JS基础之undefined与null的区别分析
2011/08/08 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
2015/08/25 Javascript
jquery中ajax处理跨域的三大方式
2016/01/05 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
Angular2表单自定义验证器的实现
2016/10/19 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
JSON 数据格式详解
2017/09/13 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
今天,小程序正式支持 SVG
2019/04/20 Javascript
Python计算三角函数之asin()方法的使用
2015/05/15 Python
Swift 3.0在集合类数据结构上的一些新变化总结
2016/07/11 Python
django settings.py 配置文件及介绍
2019/07/15 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
python读取ini配置文件过程示范
2019/12/23 Python
对Matlab中共轭、转置和共轭装置的区别说明
2020/05/11 Python
python 操作mysql数据中fetchone()和fetchall()方式
2020/05/15 Python
python 瀑布线指标编写实例
2020/06/03 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
Booking.com英国官网:全球酒店在线预订网站
2018/04/21 全球购物
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
Everlast官网:拳击、综合格斗和健身相关的体育用品
2020/08/03 全球购物
大四学生思想汇报
2014/01/13 职场文书
中国文明网签名寄语
2014/01/18 职场文书
黄河象教学反思
2014/02/10 职场文书
汇报材料怎么写
2014/12/30 职场文书
《落花生》教学反思
2016/02/16 职场文书
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS