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 相关文章推荐
不用ajax实现点击文字即可编辑的方法
Dec 16 Javascript
JavaScript实现隐藏省略文字效果的方法
Apr 27 Javascript
微信小程序 支付后台java实现实例
May 09 Javascript
JavaScript使用ZeroClipboard操作剪切板
May 10 Javascript
JS实现简易的图片拖拽排序实例代码
Jun 09 Javascript
全新打包工具parcel零配置vue开发脚手架
Jan 11 Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 Javascript
vue实现图片预览组件封装与使用
Jul 13 Javascript
vue多页面项目中路由使用history模式的方法
Sep 23 Javascript
Node.js 实现抢票小工具 & 短信通知提醒功能
Oct 22 Javascript
微信小程序实现底部弹出模态框
Nov 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 file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
ThinkPHP与PHPExcel冲突解决方法
2011/08/08 PHP
PHP把空格、换行符、中文逗号等替换成英文逗号的正则表达式
2014/05/04 PHP
PHP生成随机数的方法实例分析
2015/01/22 PHP
php动态函数调用方法
2015/05/21 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
通过jQuery源码学习javascript(二)
2012/12/27 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
node-http-proxy修改响应结果实例代码
2016/06/06 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
2016/11/24 Javascript
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
vue中如何添加百度统计代码
2020/12/19 Vue.js
python解决方案:WindowsError: [Error 2]
2016/08/28 Python
matplotlib绘制符合论文要求的图片实例(必看篇)
2017/06/02 Python
分享给Python新手们的几道简单练习题
2017/09/21 Python
python实现彩票系统
2020/06/28 Python
python读取Excel实例详解
2018/08/17 Python
基于Django框架利用Ajax实现点赞功能实例代码
2018/08/19 Python
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
Brasty波兰:香水、化妆品、手表网上商店
2019/04/15 全球购物
自我鉴定200字
2013/10/28 职场文书
八年级生物教学反思
2014/01/22 职场文书
酒店经理职责
2014/01/30 职场文书
数控个人求职信范文
2014/02/03 职场文书
班训口号大全
2014/06/18 职场文书
2016年春季运动会通讯稿
2015/11/25 职场文书
yolov5返回坐标的方法实例
2022/03/17 Python