jQuery实现自动滚动到页面顶端的方法

   本文实例讲述了jQuery实现自动滚动到页面顶端的方法。分享给大家供大家参考。具体实现方法如下:

  ?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

$(".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程序设计有所帮助。

时间: 2024-11-02 09:52:05

jQuery实现自动滚动到页面顶端的方法的相关文章

jQuery实现自动滚动到页面顶端的方法_jquery

本文实例讲述了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 t

jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)_jquery

本文实例讲述了jQuery+ajax实现滚动到页面底部自动加载图文列表效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu

jQuery实现带滚动线条导航效果的方法_jquery

本文实例讲述了jQuery实现带滚动线条导航效果的方法.分享给大家供大家参考.具体分析如下: 最早见到这种导航是在魅族的官网,当时(去年)觉得挺不错的但自己不会JavaScript,因此那时"可望而不可及".今日去手机QQ for Android官网,又发现类似这样的导航,反正自己也没啥事,所以就尝试用jQuery做出这样的效果. 效果如下: 首页 说说 日志 相册     CSS: body,ul,li{margin:0;padding:0;} #testnav{;height:80

asp.net中倒计时自动跳转页面的实现方法(使用javascript)_实用技巧

首先,先建立一个用于跳转的页面,代码如下. 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="LoginTiao.aspx.cs" Inherits="LoginTiao" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &

jquery autocomplete自动完成插件的的使用方法_jquery

首先下载所需文件,jquery.autocomplete.js和jquery.autocomplete.css. 由于该控件获得数据可以从数组和URL两种方式获取,所以写了两个简单的小例子试验一下. 前台代码如下: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AutoComplete.aspx.cs" Inherits="AutoComple

jQuery实现的自动加载页面功能示例_jquery

本文实例讲述了jQuery实现的自动加载页面功能.分享给大家供大家参考,具体如下: demo.html: <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>---------------</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"

js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)_javascript技巧

本文实例讲述了js实现的鼠标滚轮滚动切换页面效果的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>wheel</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <script type=

XP系统设置关机自动清理虚拟内存页面文件

  XP系统设置关机自动清理虚拟内存页面文件           具体如下: 1.打开"开始--控制面板--管理工具--本地安全策略". 2.在打开的本地安全设置后展开到"本地策略--安全选项",然后在右侧窗口中双击清理虚拟内存页面文件. 3.在打开的设置窗口中,勾选已启用,点击"确定"即可. 4.重新启动系统生效. XP系统设置关机自动清理虚拟内存页面文件的方法就介绍到这里了.按照上述步骤操作后,页面文件就会自动清除了.感兴趣的朋友们,不妨自己

XP系统怎么设置关机自动清理虚拟内存页面文件

  XP系统怎么设置关机自动清理虚拟内存页面文件          具体如下: 1.打开"开始--控制面板--管理工具--本地安全策略". 2.在打开的本地安全设置后展开到"本地策略--安全选项",然后在右侧窗口中双击清理虚拟内存页面文件. 3.在打开的设置窗口中,勾选已启用,点击"确定"即可. 4.重新启动系统生效. XP系统设置关机自动清理虚拟内存页面文件的方法就介绍到这里了.