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 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
JQuery 文本框使用小结
May 22 Javascript
JAVASCRIPT函数作用域和提前声明 分享
Aug 22 Javascript
jquery选择器之属性过滤选择器详解
Jan 27 Javascript
js返回前一页刷新本页重载页面
Jul 29 Javascript
js闭包实现按秒计数
Apr 23 Javascript
jQuery取消特定的click事件
Feb 29 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
Dec 05 Javascript
js实现3D图片环展示效果
Mar 09 Javascript
vue加载完成后的回调函数方法
Sep 07 Javascript
小程序实现列表多个批量倒计时
Jan 29 Javascript
Node.js 中判断一个文件是否存在
Aug 24 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+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
如何写php守护进程(Daemon)
2015/12/30 PHP
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
基于JQuery的Pager分页器实现代码
2010/07/17 Javascript
Js Jquery创建一个弹出层可加载一个页面
2014/05/08 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
jQuery拖动布局其结果保存到数据库
2015/10/09 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
jQuery实现拖动剪裁图片作为头像
2016/12/28 Javascript
xmlplus组件设计系列之图标(ICON)(1)
2017/05/05 Javascript
vue之nextTick全面解析
2017/05/17 Javascript
JS实现搜索关键词的智能提示功能
2017/07/07 Javascript
js中this对象用法分析
2018/01/05 Javascript
jQuery替换节点元素的操作方法
2018/03/18 jQuery
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
2019/11/12 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
Python字符转换
2008/09/06 Python
python操作mongodb根据_id查询数据的实现方法
2015/05/20 Python
python保存字符串到文件的方法
2015/07/01 Python
Python排序算法实例代码
2017/08/10 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
Django文件存储 默认存储系统解析
2019/08/02 Python
学Python 3的理由和必要性
2019/11/19 Python
python GUI库图形界面开发之PyQt5开发环境配置与基础使用
2020/02/25 Python
KLOOK客路:发现更好玩的世界,预订独一无二的旅行体验
2016/12/16 全球购物
Internal修饰符有什么含义
2013/07/10 面试题
应聘收银员个人的求职信
2013/11/30 职场文书
小学体育教学反思
2014/01/31 职场文书
后勤部经理岗位职责
2014/02/23 职场文书
社区活动策划方案
2014/08/21 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
介绍信格式样本
2015/05/05 职场文书
如何书写民事调解协议书?
2019/06/25 职场文书
python turtle绘制多边形和跳跃和改变速度特效
2022/03/16 Python
Python实现文字pdf转换图片pdf效果
2022/04/03 Python