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 相关文章推荐
一起来写段JS drag拖动代码
Dec 09 Javascript
javascript 闭包
Sep 15 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
Mar 05 Javascript
微信小程序 数据绑定详解及实例
Oct 25 Javascript
JS实现物体带缓冲的间歇运动效果示例
Dec 22 Javascript
jQuery中的on与bind绑定事件区别实例详解
Feb 28 Javascript
微信小程序视图template模板引用的实例详解
Sep 20 Javascript
解决Vue不能检测数组或对象变动的问题
Feb 24 Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 Javascript
Web安全之XSS攻击与防御小结
Dec 13 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
JavaScript 接口原理与用法实例详解
May 12 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
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
用php实现分页效果的示例代码
2020/12/10 PHP
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
2010/05/13 Javascript
基于jquery的商品展示放大镜
2010/08/07 Javascript
javascript对数组的常用操作代码 数组方法总汇
2011/01/27 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
详解JavaScript中getFullYear()方法的使用
2015/06/10 Javascript
Jquery $when done then的用法详解
2016/05/20 Javascript
分分钟玩转Vue.js组件
2016/10/25 Javascript
微信小程序 同步请求授权的详解
2017/08/04 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
2018/01/15 Javascript
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
React 条件渲染最佳实践小结(7种)
2020/09/27 Javascript
Python Matplotlib库入门指南
2015/05/18 Python
详解tensorflow训练自己的数据集实现CNN图像分类
2018/02/07 Python
python 爬虫 批量获取代理ip的实例代码
2018/05/22 Python
Django 日志配置按日期滚动的方法
2019/01/31 Python
Opencv实现抠图背景图替换功能
2019/05/21 Python
python实现根据文件格式分类
2019/10/31 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
解决django后台管理界面添加中文内容乱码问题
2019/11/15 Python
Python 矩阵转置的几种方法小结
2019/12/02 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
纯CSS3大转盘抽奖示例代码(响应式、可配置)
2017/01/13 HTML / CSS
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
毕业证丢失证明
2014/01/15 职场文书
银行职员自我鉴定
2014/04/20 职场文书
老公给老婆的保证书
2014/04/28 职场文书
青春无悔演讲稿
2014/05/08 职场文书
仓管员岗位职责范本
2015/04/01 职场文书
纪委立案决定书
2015/06/24 职场文书