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实战_读书笔记1—选择jQuery
Jan 22 Javascript
jQuery模拟点击A标记示例参考
Apr 17 Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 Javascript
jQuery实现多按钮单击变色
Nov 27 Javascript
JavaScript解析json格式数据简单示例
Dec 09 Javascript
jQuery中toggle()函数的使用实例
Apr 17 Javascript
js原生之焦点图转换加定时器实例
Dec 12 Javascript
浅谈webpack devtool里的7种SourceMap模式
Jan 14 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
Mar 29 Javascript
10种JavaScript最常见的错误(小结)
Jun 21 Javascript
功能完善的小程序日历组件的实现
Mar 31 Javascript
js实现手表表盘时钟与圆周运动
Sep 18 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变量内存分配问题记录整理
2013/11/27 PHP
php根据身份证号码计算年龄的实例代码
2014/01/18 PHP
php使用mkdir创建多级目录入门例子
2014/05/10 PHP
PNG背景在不同浏览器下的应用
2009/06/22 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
js获取select默认选中的Option并不是当前选中值
2014/05/07 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
bootstrap读书笔记之CSS组件(上)
2016/10/17 Javascript
webstorm添加vue.js支持的方法教程
2017/07/05 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
2018/04/04 Javascript
vue动态删除从数据库倒入列表的某一条方法
2018/09/29 Javascript
Vue.js 事件修饰符的使用教程
2018/11/01 Javascript
基于node简单实现RSA加解密的方法步骤
2019/03/21 Javascript
微信小程序自定义组件实现环形进度条
2020/11/17 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
2020/02/24 Javascript
原生js实现五子棋游戏
2020/05/28 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
vue组件是如何解析及渲染的?
2021/01/13 Vue.js
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
使用Python3中的gettext模块翻译Python源码以支持多语言
2015/03/31 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
pytorch实现MNIST手写体识别
2020/02/14 Python
python opencv实现图片缺陷检测(讲解直方图以及相关系数对比法)
2020/04/07 Python
python的Jenkins接口调用方式
2020/05/12 Python
解决c++调用python中文乱码问题
2020/07/29 Python
html5简介及新增功能介绍
2020/05/18 HTML / CSS
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
Zadig&Voltaire官网:法国时装品牌
2018/01/05 全球购物
ProBikeKit德国:在线公路自行车专家
2018/06/03 全球购物
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
Sandro法国官网:法国成衣品牌
2019/08/28 全球购物
Hashtable 添加内容的方式有哪几种,有什么区别?
2012/04/08 面试题
新闻学专业应届生求职信
2013/11/08 职场文书
Python如何把不同类型数据的json序列化
2021/04/30 Python