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 读后台cookie代码
Sep 15 Javascript
jQuery1.6 使用方法一
Nov 23 Javascript
javascript设计模式之对象工厂函数与构造函数详解
Jul 30 Javascript
JavaScript生成带有缩进的表格代码
Jun 15 Javascript
Jquery Easyui表单组件Form使用详解(30)
Dec 19 Javascript
js querySelector() 使用方法
Dec 21 Javascript
Angular JS 生成动态二维码的方法
Feb 23 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
Apr 25 Javascript
使用Node.js实现RESTful API的示例
Aug 01 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
Jan 30 Javascript
vue 巧用过渡效果(小结)
Sep 22 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
pw的一个放后门的方法分析
2007/10/08 PHP
PHP重定向的3种方式
2013/03/07 PHP
php读取文件内容的方法汇总
2015/01/24 PHP
PHP 二级子目录(后台目录)设置二级域名
2017/03/02 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
一文看懂PHP进程管理器php-fpm
2020/06/01 PHP
通过 Dom 方法提高 innerHTML 性能
2008/03/26 Javascript
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
js函数调用的方式
2014/05/06 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
2015/11/09 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
详解Vue中过度动画效果应用
2017/05/25 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
2017/11/22 Javascript
Vuex提升学习篇
2018/01/11 Javascript
js对象数组和对象的使用实例详解
2019/08/27 Javascript
Vue.js中的高级面试题及答案
2020/01/13 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
2020/04/03 Javascript
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
安装ElasticSearch搜索工具并配置Python驱动的方法
2015/12/22 Python
Python smtplib实现发送邮件功能
2018/05/22 Python
python读取文本绘制动态速度曲线
2018/06/21 Python
Python jieba库分词模式实例用法
2021/01/13 Python
美国成衣女装品牌:CHICO’S
2016/09/19 全球购物
网站域名和主机:Domain.com
2019/04/01 全球购物
客房部经理岗位职责
2015/02/02 职场文书
Flask response响应的具体使用
2021/07/15 Python
Ajax实现三级联动效果
2021/10/05 Javascript
通过T-SQL语句创建游标与实现数据库加解密功能
2022/03/16 SQL Server