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 相关文章推荐
类似CSDN图片切换效果脚本
Sep 17 Javascript
jQuery选择没有colspan属性的td的代码
Jul 06 Javascript
使用javascript为网页增加夜间模式
Jan 26 Javascript
jQuery操作JSON的CRUD用法实例
Feb 25 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
Nov 30 Javascript
Angular中支持SCSS的方法
Nov 18 Javascript
对Angular中单向数据流的深入理解
Mar 31 Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
May 05 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
Jul 06 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
Mar 02 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
点评山进PR-D3L三波段收音机
2021/03/02 无线电
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
php字符串函数学习之strstr()
2015/03/27 PHP
php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
php指定长度分割字符串str_split函数用法示例
2017/01/30 PHP
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
JS子父窗口互相操作取值赋值的方法介绍
2013/05/11 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
2013/08/12 Javascript
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
js对象的复制继承实例
2015/01/10 Javascript
在React框架中实现一些AngularJS中ng指令的例子
2016/03/06 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
JavaScript阻止表单提交方法(附代码)
2017/08/15 Javascript
关于TypeScript模块导入的那些事
2018/06/12 Javascript
4 种滚动吸顶实现方式的比较
2019/04/09 Javascript
layui 表单标签的校验方法
2019/09/04 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
[00:08]DOTA2勇士令状等级奖励“天外飞星”
2019/05/24 DOTA
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
python七夕浪漫表白源码
2019/04/05 Python
python networkx 包绘制复杂网络关系图的实现
2019/07/10 Python
使用pandas的box_plot去除异常值
2019/12/10 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
python实现斗地主分牌洗牌
2020/06/22 Python
使用canvas实现黑客帝国数字雨效果
2020/01/02 HTML / CSS
雷朋巴西官方商店:Ray-Ban Brasil
2020/07/21 全球购物
《童年》教学反思
2014/02/18 职场文书
行政部岗位职责范本
2014/03/13 职场文书
幼儿园大班毕业教师寄语
2014/04/03 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
公司证明怎么写
2014/09/22 职场文书
教师自查自纠工作情况报告
2014/10/29 职场文书
党员干部公开承诺书范文
2015/04/27 职场文书
春节晚会开场白
2015/05/29 职场文书
zabbix监控mysql的实例方法
2021/06/02 MySQL