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为iframe的body添加click事件的实现代码
Apr 07 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
Aug 01 Javascript
使用JQuery选择HTML遍历函数的方法
Sep 17 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
Nov 29 Javascript
jQuery实用密码强度检测
Mar 02 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
Jun 15 Javascript
ES6学习教程之对象字面量详解
Oct 09 Javascript
微信小程序开发常见问题及解决方案
Jul 11 Javascript
详解用async/await来处理异步
Aug 28 Javascript
webpack HappyPack实战详解
Oct 08 Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 Javascript
如何通过Proxy实现JSBridge模块化封装
Oct 22 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
thinkphp备份数据库的方法分享
2015/01/04 PHP
Laravel中使用阿里云OSS Composer包分享
2015/02/10 PHP
php抽象类用法实例分析
2015/07/07 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
漂亮的widgets,支持换肤和后期开发新皮肤
2007/04/23 Javascript
文本链接逐个出现的js脚本
2007/12/12 Javascript
Ajax,UTF-8还是GB2312 eval 还是execScript
2008/11/13 Javascript
用户注册常用javascript代码
2009/08/29 Javascript
JavaScript OOP类与继承
2009/11/15 Javascript
JQuery 中几个类选择器的简单使用介绍
2013/03/14 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
2018/08/25 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
vue 解决遍历对象显示的顺序不对问题
2019/11/07 Javascript
Python去除列表中重复元素的方法
2015/03/20 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
Python 实现微信防撤回功能
2019/04/29 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
Django的性能优化实现解析
2019/07/30 Python
python使用列表的最佳方案
2020/08/12 Python
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
自荐书范文
2013/12/08 职场文书
《英英学古诗》教学反思
2014/04/11 职场文书
共青团员自我评价范文
2014/09/14 职场文书
2015年公务员个人工作总结
2015/04/24 职场文书
穆斯林的葬礼读书笔记
2015/06/26 职场文书
教师理论学习心得体会
2016/01/21 职场文书
《海上日出》教学反思
2016/02/23 职场文书
Python文件的操作示例的详细讲解
2021/04/08 Python
SQLServer中exists和except用法介绍
2021/12/04 SQL Server
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis