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打字小游戏代码
Dec 26 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
Dec 25 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
Jan 27 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
Jan 12 Javascript
Vue键盘事件用法总结
Apr 18 Javascript
VUE前端cookie简单操作
Oct 17 Javascript
深入浅析vue组件间事件传递
Dec 29 Javascript
原生js实现form表单序列化的方法
Aug 02 Javascript
微信小程序实现省市区三级地址选择
Jun 21 Javascript
vue中实现图片压缩 file文件的方法
May 28 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实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
PHP错误WARNING: SESSION_START() [FUNCTION.SESSION-START]解决方法
2014/05/04 PHP
php实现插入数组但不影响原有顺序的方法
2015/03/27 PHP
PHP页面跳转操作实例分析(header方法)
2016/09/28 PHP
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
JavaScript中的对象与JSON
2015/07/03 Javascript
javascript常用函数(2)
2015/11/05 Javascript
javascript中不易分清的slice,splice和split三个函数
2016/03/29 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
2016/05/10 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
2020/10/26 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
JavaScript类的继承多种实现方法
2020/05/30 Javascript
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
深入理解Python中字典的键的使用
2015/08/19 Python
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
Python编程实现的图片识别功能示例
2017/08/03 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
Pandas Shift函数的基础入门学习笔记
2018/11/16 Python
解决pycharm下pyuic工具使用的问题
2020/04/08 Python
python3读取autocad图形文件.py实例
2020/06/05 Python
Python进行统计建模
2020/08/10 Python
如何通过Python实现RabbitMQ延迟队列
2020/11/28 Python
CSS3之2D与3D变换的实现方法
2019/01/28 HTML / CSS
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
澳大利亚家庭花园和DIY工具网店:VidaXL
2019/05/03 全球购物
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
毕业生求职的求职信
2013/12/05 职场文书
生日主持词
2014/03/20 职场文书
党的群众教育实践活动实施方案
2014/06/12 职场文书
工作目标责任书
2014/07/23 职场文书
2015年食堂工作总结报告
2015/04/23 职场文书
运动会开幕式通讯稿
2015/07/18 职场文书
Python开发五子棋小游戏
2022/05/02 Python