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类后台管理菜单类-MenuSwitch
Sep 12 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
JavaScript中获取高度和宽度函数总结
Oct 08 Javascript
jQuery元素选择器用法实例
Dec 23 Javascript
javascript引用赋值(地址传值)用法实例
Jan 13 Javascript
javascript实现树形菜单的方法
Jul 17 Javascript
JavaScript基本的输出和嵌入式写法教程
Oct 20 Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 Javascript
Html中 IFrame的用法及注意点
Dec 22 Javascript
vue-router动态设置页面title的实例讲解
Aug 30 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
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使用静态方法的几个注意事项
2014/09/16 PHP
PHP中子类重载父类的方法【parent::方法名】
2016/05/06 PHP
PHP生成图像验证码的方法小结(2种方法)
2016/07/18 PHP
拖动一个HTML元素
2006/12/22 Javascript
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
js数组去重的常用方法总结
2014/01/24 Javascript
jQuery背景插件backstretch使用指南
2015/04/21 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
jQuery事件_动力节点Java学院整理
2017/07/05 jQuery
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
150行Node.js实现的dns代理工具
2019/08/02 Javascript
Element Dropdown下拉菜单的使用方法
2020/07/26 Javascript
vue-cli3 引入 font-awesome的操作
2020/08/11 Javascript
Node.JS如何实现JWT原理
2020/09/18 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
2020/11/06 Javascript
Python解析xml中dom元素的方法
2015/03/12 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
PyCharm设置Ipython交互环境和宏快捷键进行数据分析图文详解
2020/04/23 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
英国最大的笔记本电脑直销专家:Laptops Direct
2019/07/20 全球购物
计算机专业推荐信范文
2013/11/27 职场文书
面包店的创业计划书范文
2014/01/16 职场文书
贺卡寄语大全
2014/04/11 职场文书
企业标语口号
2014/06/10 职场文书
销售行政专员岗位职责
2014/06/10 职场文书
新闻编辑求职信
2014/07/13 职场文书
食品委托检验协议书范本
2014/09/12 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python