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 相关文章推荐
用jscript实现列出安装的软件列表
Jun 18 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
Mar 25 Javascript
javascript中的五种基本数据类型
Aug 26 Javascript
jQuery实现点击查看大图并以弹框的形式居中
Aug 08 Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 Javascript
记一次webpack3升级webpack4的踩坑经历
Jun 12 Javascript
微信小程序授权登录及解密unionId出错的方法
Sep 26 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
详解jQuery-each()方法
Mar 13 jQuery
小程序实现订单倒计时功能
Apr 23 Javascript
JS为什么说async/await是generator的语法糖详解
Jul 11 Javascript
在layui中layer弹出层点击事件无效的解决方法
Sep 05 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
PHP file_get_contents 函数超时的几种解决方法
2009/07/30 PHP
基于PHPExcel的常用方法总结
2013/06/13 PHP
php判断手机访问还是电脑访问示例分享
2014/01/20 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
thinkphp3.2.2实现生成多张缩略图的方法
2014/12/19 PHP
轻松掌握php设计模式之访问者模式
2016/09/23 PHP
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
让任务管理器中的CPU跳舞的js代码
2008/11/01 Javascript
js 加载并解析XML字符串的代码
2009/12/13 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
2015/12/04 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
微信小程序项目实践之验证码倒计时功能
2018/07/18 Javascript
使用React手写一个对话框或模态框的方法示例
2019/04/25 Javascript
JS实现数组删除指定元素功能示例
2019/06/05 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
Vue组件模板及组件互相引用代码实例
2020/03/11 Javascript
webpack+express实现文件精确缓存的示例代码
2020/06/11 Javascript
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
Python实现基于二叉树存储结构的堆排序算法示例
2017/12/08 Python
python将字符串转换成json的方法小结
2019/07/09 Python
Django 项目重命名的实现步骤解析
2019/08/14 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
Python实现AI换脸功能
2020/04/10 Python
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
Superdry瑞典官网:英国日本街头风品牌
2017/05/17 全球购物
个人承诺书格式
2014/06/03 职场文书
伦敦奥运会的口号
2014/06/21 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
Redis延迟队列和分布式延迟队列的简答实现
2021/05/13 Redis