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知识点三 jquery表单对象操作
Jan 17 Javascript
javascript操作excel生成报表示例
May 08 Javascript
ie 7/8不支持trim的属性的解决方案
May 23 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
Jan 10 Javascript
Javascript 判断两个IP是否在同一网段实例代码
Nov 28 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
Sep 21 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
May 09 Javascript
JavaScript仿京东秒杀倒计时
Mar 17 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
Jul 17 Javascript
JavaScript 防篡改对象的用法示例
Apr 24 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基础知识:类与对象(3) 构造函数和析构函数
2006/12/13 PHP
PHP中array_merge和array相加的区别分析
2013/06/17 PHP
使用php将某个目录下面的所有文件罗列出来的方法详解
2013/06/21 PHP
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
thinkphp浏览历史功能实现方法
2014/10/29 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
php获取'/'传参的值简单方法
2017/07/13 PHP
PDO::getAvailableDrivers讲解
2019/01/28 PHP
解决Laravel无法使用COOKIE和SESSION的问题
2019/10/16 PHP
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
jQuery中parent()方法用法实例
2015/01/07 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
2015/08/08 Javascript
写给小白的JavaScript引擎指南
2015/12/04 Javascript
javascript中this指向详解
2016/04/23 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
JS中from 表单序列化提交的代码
2017/01/20 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
浅谈实现在线预览PDF的几种解决办法
2020/08/10 Javascript
基于Python闭包及其作用域详解
2017/08/28 Python
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
Python使用pyautocad+openpyxl处理cad文件示例
2019/07/11 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
python正则表达式实例代码
2020/03/03 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
工作证明格式及范本
2014/09/12 职场文书
实习证明格式范文
2014/10/14 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
2015年元旦促销方案书
2014/12/09 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书
用Python仅20行代码编写一个简单的端口扫描器
2022/04/08 Python