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 相关文章推荐
鼠标右击事件代码(asp.net后台)
Jan 27 Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
Mar 31 Javascript
浅谈JavaScript正则表达式分组匹配
Apr 10 Javascript
jQuery中on方法使用注意事项详解
Feb 15 Javascript
微信小程序 图片绝对定位(背景图片)
Apr 05 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
vue实现element-ui对话框可拖拽功能
Aug 17 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
JavaScript私有变量实例详解
Jan 24 Javascript
JS中min函数实例讲解
Feb 18 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 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
我的论坛源代码(一)
2006/10/09 PHP
php将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
PHP实现json_decode不转义中文的方法
2017/05/20 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
JavaScript 内置对象属性及方法集合
2010/07/04 Javascript
学习面向对象之面向对象的术语
2010/11/30 Javascript
使用Java实现简单的server/client回显功能的方法介绍
2013/05/03 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
2014/06/02 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
2014/09/25 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
JavaScript遍历求解数独问题的主要思路小结
2016/06/12 Javascript
带有定位当前位置的百度地图前端web api实例代码
2016/06/21 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
详解Vue中的scoped及穿透方法
2019/04/18 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
2019/05/09 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
通过mod_python配置运行在Apache上的Django框架
2015/07/22 Python
python爬虫之自动登录与验证码识别
2020/06/15 Python
python实现flappy bird游戏
2018/12/24 Python
opencv中图像叠加/图像融合/按位操作的实现
2020/04/01 Python
PyTorch中的C++扩展实现
2020/04/02 Python
记一次Django响应超慢的解决过程
2020/09/17 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
Python os库常用操作代码汇总
2020/11/03 Python
Python监听剪切板实现方法代码实例
2020/11/11 Python
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
前台文员职责范本
2014/03/07 职场文书
2014年销售人员工作总结
2014/11/27 职场文书
总经理司机岗位职责
2015/04/10 职场文书
在项目中使用redis做缓存的一些思路
2021/09/14 Redis