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类中的公有变量和私有变量
Jul 24 Javascript
js prototype截取字符串函数
Apr 01 Javascript
JS俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
JavaScript异步编程:异步数据收集的具体方法
Aug 19 Javascript
js的alert样式如何更改如背景颜色
Jan 22 Javascript
用javascript对一个json数组深度赋值示例
Jul 27 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
Fullpage.js固定导航栏-实现定位导航栏
Mar 17 Javascript
Bootstrap table简单使用总结
Feb 15 Javascript
简述vue-cli中chainWebpack的使用方法
Jul 30 Javascript
关于React Native使用axios进行网络请求的方法
Aug 02 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
星际原理概述
2020/03/04 星际争霸
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
Laravel中9个不经常用的小技巧汇总
2019/04/16 PHP
js 窗口抖动示例
2013/09/04 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
超级简单的jquery操作表格方法
2014/12/15 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
JQuery和PHP结合实现动态进度条上传显示
2016/11/23 Javascript
jQuery中的一些小技巧
2017/01/18 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
Vue Promise的axios请求封装详解
2018/08/13 Javascript
vue实现扫码功能
2020/01/17 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
python Crypto模块的安装与使用方法
2017/12/21 Python
python编辑用户登入界面的实现代码
2018/07/16 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
Python 的AES加密与解密实现
2019/07/09 Python
python实现比对美团接口返回数据和本地mongo数据是否一致示例
2019/08/09 Python
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
2019/08/27 Python
解决Python3下map函数的显示问题
2019/12/04 Python
Python中if有多个条件处理方法
2020/02/26 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
2014/04/14 HTML / CSS
init进程的作用
2015/08/20 面试题
介绍一下Python下range()函数的用法
2013/11/07 面试题
高三上学期学习自我评价
2014/04/23 职场文书
户籍证明书标准模板
2014/09/10 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
工作态度怎么写
2015/06/25 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书