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 相关文章推荐
为数据添加append,remove功能
Oct 03 Javascript
js 单引号 传递方法
Jun 22 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
May 19 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
Feb 25 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
Aug 01 Javascript
JS实现的竖向折叠菜单代码
Oct 21 Javascript
Angularjs 自定义服务的三种方式(推荐)
Aug 02 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
Nov 09 Javascript
vue.js+Echarts开发图表放大缩小功能实例
Jun 09 Javascript
详解angular脏检查原理及伪代码实现
Jun 08 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 Javascript
微信小程序实现笑脸评分功能
Nov 03 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使用curl发送json格式数据实例
2013/12/17 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
javascript之函数直接量(function(){})()
2007/06/29 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
2010/01/15 Javascript
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
Javascript单元测试框架QUnitjs详细介绍
2014/05/08 Javascript
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
js实现三级联动效果(简单易懂)
2017/03/27 Javascript
Vue之mixin全局的用法详解
2018/08/22 Javascript
Vue 事件处理操作实例详解
2019/03/05 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
[35:26]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第三局
2016/02/26 DOTA
python登录豆瓣并发帖的方法
2015/07/08 Python
python UNIX_TIMESTAMP时间处理方法分析
2016/04/18 Python
django使用html模板减少代码代码解析
2017/12/12 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
python 爬虫网页登陆的简单实现
2020/11/30 Python
Christys’ Hats官网:英国帽子制造商
2018/11/28 全球购物
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
C#如何判断当前用户是否输入某个域
2015/12/07 面试题
《钱学森》听课反思
2014/03/01 职场文书
党员干部一句话承诺
2014/05/30 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
授权委托书
2015/01/28 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
创业计划书之面包店
2019/09/12 职场文书
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP
python not运算符的实例用法
2021/06/30 Python
Python matplotlib多个子图绘制整合
2022/04/13 Python
如何通过cmd 连接阿里云服务器
2022/04/18 Servers