jQuery实现自动滚动到页面顶端的方法


Posted in Javascript onMay 22, 2015

本文实例讲述了jQuery实现自动滚动到页面顶端的方法。分享给大家供大家参考。具体实现方法如下:

$(".scroll").click(function(event)
{
  //prevent the default action for the click event
  event.preventDefault();
  //get the full url - like mysitecom/index.htm#home
  var full_url = this.href;
  //split the url by # and get the anchor target 
  //name - home in mysitecom/index.htm#home
  var parts = full_url.split("#");
  var trgt = parts[1];
  //get the top offset of the target anchor
  var target_offset = $("#"+trgt).offset();
  var target_top = target_offset.top;
  //goto that anchor by setting the body scroll top to anchor top
  $('html, body').animate({scrollTop:target_top}, 500);
});​

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript中日期的相关操作方法总结
Oct 24 Javascript
js获取iframe中的window对象的实现方法
May 20 Javascript
js 声明数组和向数组中添加对象变量的简单实例
Jul 28 Javascript
Bootstrap字体图标无法正常显示的解决方法
Oct 08 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
Oct 31 Javascript
js禁止浏览器的回退事件
Apr 20 Javascript
react 创建单例组件的方法
Apr 26 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
May 16 Javascript
微信小程序实现简易table表格
Jun 19 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
Oct 24 Javascript
前端学习——JavaScript原生实现购物车案例
Mar 31 Javascript
JavaScript执行机制详细介绍
Dec 06 Javascript
JavaScript检测鼠标移动方向的方法
May 22 #Javascript
jQuery实现强制cookie过期方法汇总
May 22 #Javascript
jQuery判断指定id的对象是否存在的方法
May 22 #Javascript
jQuery实现转动随机数抽奖效果的方法
May 21 #Javascript
JQuery分屏指示器图片轮换效果实例
May 21 #Javascript
jQuery聚合函数实例
May 21 #Javascript
js获取页面description的方法
May 21 #Javascript
You might like
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
js实现DIV的一些简单控制
2007/06/04 Javascript
JS 无限级 Select效果实现代码(json格式)
2011/08/30 Javascript
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
AngularJS表单和输入验证实例
2016/11/02 Javascript
基于模板引擎Jade的应用(详解)
2017/12/12 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
2018/02/01 Javascript
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
简谈创建React Component的几种方式
2019/06/15 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
Python heapq使用详解及实例代码
2017/01/25 Python
微信跳一跳python代码实现
2018/01/05 Python
浅述python中深浅拷贝原理
2018/09/18 Python
python求加权平均值的实例(附纯python写法)
2019/08/22 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
python开根号实例讲解
2020/08/30 Python
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
便携式太阳能系统的创新者:GOAL ZERO
2018/02/04 全球购物
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
八一建军节部队活动方案
2014/02/04 职场文书
计算机科学系职业生涯规划书
2014/03/08 职场文书
读书活动总结
2014/04/28 职场文书
党课心得体会范文
2014/09/09 职场文书
网络工程专业大学生求职信
2014/10/01 职场文书
2015年清明节活动总结
2015/02/09 职场文书
2015年医院工作总结范文
2015/04/09 职场文书
社区党员干部承诺书
2015/05/04 职场文书
导游词之任弼时故居
2020/01/07 职场文书
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers
js前端图片加载异常兜底方案
2022/06/21 Javascript