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 16 Javascript
js sort 二维数组排序的用法小结
Jan 24 Javascript
cookie的secure属性详解
Apr 08 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
Feb 14 Javascript
原生js更改css样式的两种方式
Mar 15 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
Oct 06 Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 Javascript
JS实现非首屏图片延迟加载的示例
Jan 06 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
Apr 22 Javascript
jQuery解析json格式数据示例
Sep 01 jQuery
vue组件 keep-alive 和 transition 使用详解
Oct 11 Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 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
多文件上传的例子
2006/10/09 PHP
PHP初学入门
2006/11/19 PHP
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
jquery动态加载js三种方法实例
2013/08/03 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
2014/02/07 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
D3.js中data(), enter() 和 exit()的问题详解
2015/08/17 Javascript
去除字符串左右两边的空格(实现代码)
2016/05/12 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
2016/08/15 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
AngularJS表单验证功能
2017/10/19 Javascript
vue axios 简单封装以及思考
2018/10/09 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
微信小程序仿通讯录功能
2020/04/09 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
2020/05/15 Javascript
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
Python常用内置函数总结
2015/02/08 Python
python 函数传参之传值还是传引用的分析
2017/09/07 Python
Python 判断是否为质数或素数的实例
2017/10/30 Python
Python统计分析模块statistics用法示例
2019/09/06 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
python如何求圆的面积
2020/07/01 Python
scrapy框架携带cookie访问淘宝购物车功能的实现代码
2020/07/07 Python
pymongo insert_many 批量插入的实例
2020/12/05 Python
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
体验完美剃须:The Art of Shaving
2018/08/06 全球购物
英国著名书店:Foyles
2018/12/01 全球购物
英国手机零售商:Metrofone
2019/03/18 全球购物
建筑总经理岗位职责
2014/02/02 职场文书
工作保证书范文
2014/04/29 职场文书
重阳节活动总结
2014/08/27 职场文书
化工实习心得体会
2014/09/09 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
授权委托书怎么写
2014/09/25 职场文书
研究生个人学年总结
2015/02/14 职场文书