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 相关文章推荐
自动设置iframe大小的jQuery代码
Sep 11 Javascript
js控制浏览器全屏示例代码
Feb 20 Javascript
jquery判断复选框是否选中进行答题提示特效
Dec 10 Javascript
关于JavaScript 原型链的一点个人理解
Jul 31 Javascript
js实现界面向原生界面发消息并跳转功能
Nov 22 Javascript
canvas 实现中国象棋
Feb 17 Javascript
socket.io学习教程之基本应用(二)
Apr 29 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
Oct 30 Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
ES6 class的应用实例分析
Jun 27 Javascript
浅析vue中的provide / inject 有什么用处
Nov 10 Javascript
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
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
6种php上传图片重命名的方法实例
2013/11/04 PHP
php 自定义错误日志实例详解
2016/11/12 PHP
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
使用composer安装使用thinkphp6.0框架问题【视频教程】
2019/10/01 PHP
用js查找法实现当前栏目的高亮显示的代码
2007/11/24 Javascript
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
2014/09/04 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
Node.js复制文件的方法示例
2016/12/29 Javascript
详解Vue 事件驱动和依赖追踪
2017/04/22 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
Vue组件的使用教程详解
2018/01/05 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
2019/06/17 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
Python判断Abundant Number的方法
2015/06/15 Python
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
快速了解Python相对导入
2018/01/12 Python
python操作excel文件并输出txt文件的实例
2018/07/10 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
python 线性回归分析模型检验标准--拟合优度详解
2020/02/24 Python
利用python3筛选excel中特定的行(行值满足某个条件/行值属于某个集合)
2020/09/04 Python
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
JENNIFER BEHR官网:各种耳环和发饰
2020/06/07 全球购物
潘多拉珠宝俄罗斯官方网上商店:PANDORA俄罗斯
2020/09/22 全球购物
办公室文秘自我评价
2013/09/21 职场文书
供电工程专业求职信
2014/08/09 职场文书
幼儿园中班个人总结
2015/02/28 职场文书
Python 制作自动化翻译工具
2021/04/25 Python
ubuntu端向日葵键盘输入卡顿问题及解决
2022/12/24 Servers