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中字符串拼接需注意的问题
Jul 13 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
Aug 14 Javascript
JS随即打乱数组实现代码
Dec 03 Javascript
JS 实现导航栏悬停效果(续2)
Sep 24 Javascript
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
全面了解javascript中的错误处理机制
Jul 18 Javascript
基于vue的fullpage.js单页滚动插件
Mar 20 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
Vue——前端生成二维码的示例
Dec 19 Vue.js
JavaScript 获取滚动条位置并将页面滑动到锚点
Feb 08 Javascript
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
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
一个很方便的 XML 类!!原创的噢
2006/10/09 PHP
PHP采集利器 Snoopy 试用心得
2011/07/03 PHP
用Json实现PHP与JavaScript间数据交换的方法详解
2013/06/20 PHP
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
javascript编程起步(第五课)
2007/02/27 Javascript
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
2009/08/28 Javascript
JavaScript 布尔操作符解析  && || !
2012/08/10 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
JS键盘版计算器的制作方法
2016/12/03 Javascript
jquery mobile实现可折叠的导航按钮
2017/03/11 Javascript
vue中的模态对话框组件实现过程
2018/05/01 Javascript
如何自定义微信小程序tabbar上边框的颜色
2019/07/09 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
2019/10/29 Javascript
通过vue刷新左侧菜单栏操作
2020/08/06 Javascript
js面向对象方式实现拖拽效果
2021/03/03 Javascript
[02:28]DOTA2亚洲邀请赛附加赛 RECAP赛事回顾
2015/01/29 DOTA
python的id()函数解密过程
2012/12/25 Python
详解 Python 与文件对象共事的实例
2017/09/11 Python
Python基于time模块求程序运行时间的方法
2017/09/18 Python
Python机器学习之决策树算法
2017/12/22 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
python每天定时运行某程序代码
2019/08/16 Python
Django 实现xadmin后台菜单改为中文
2019/11/15 Python
django 链接多个数据库 并使用原生sql实现
2020/03/28 Python
QML用PathView实现轮播图
2020/06/03 Python
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
欧洲最大的预定车位市场:JustPark
2020/01/06 全球购物
感恩节活动策划方案
2014/05/16 职场文书
创文明城市标语
2014/06/16 职场文书
教师个人成长总结
2015/02/11 职场文书
生死抉择观后感
2015/06/09 职场文书
股权投资协议书
2016/03/23 职场文书
当你焦虑迷茫时,请读读这6句话
2019/07/24 职场文书
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js