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 相关文章推荐
jQuery UI Autocomplete 体验分享
Feb 14 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
Mar 29 Javascript
js实现最短的XML格式化工具实例
Mar 12 Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 Javascript
基于javascript实现图片预加载
Jan 05 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
Mar 01 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
Apr 20 Javascript
javascript获取网页各种高宽及位置的方法总结
Jul 27 Javascript
JavaScript常用代码书写规范的超全面总结
Sep 11 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
Nov 04 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
Dec 16 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 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
索尼SONY SRF-S83/84电路分析和打磨
2021/03/02 无线电
php数据结构与算法(PHP描述) 快速排序 quick sort
2012/06/21 PHP
php中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
php实现中文字符截取防乱码方法汇总
2015/04/29 PHP
Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
2016/03/07 PHP
php实现有序数组旋转后寻找最小值方法
2018/09/27 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
JavaScript中“+=”的应用
2007/02/02 Javascript
JS继承 笔记
2011/07/13 Javascript
Script标签与访问HTML页面详解
2014/01/10 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
jQuery Dom元素操作技巧
2018/02/04 jQuery
vue2.0 中使用transition实现动画效果使用心得
2018/08/13 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
微信小程序中this.data与this.setData的区别详解
2018/09/17 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
Element Tooltip 文字提示的使用示例
2020/07/26 Javascript
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
Python实现远程调用MetaSploit的方法
2014/08/22 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
python pandas移动窗口函数rolling的用法
2020/02/29 Python
浅谈Python中的模块
2020/06/10 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
canvas生成带二维码海报的踩坑记录
2019/09/11 HTML / CSS
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
美国保健品专家:Life Extension
2018/05/04 全球购物
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
电子商务专业求职信
2014/03/08 职场文书
2014年共青团工作总结
2014/12/10 职场文书
期末考试复习计划
2015/01/19 职场文书
交通安全学习心得体会
2016/01/18 职场文书
使用JS实现简易计算器
2021/06/14 Javascript
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android