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

赞 (0)

相关推荐

  • jQuery插件scroll实现无缝滚动效果

    scroll滚动插件 支持上下左右,淡入淡出,滚动时间设置,动画时间设置,鼠标经过是否停止设置 默认配置参数可修改 $(".content").easysroll({ //默认配置参数 direction: "left", //滚动方向 left(向左)right(向右) top(向上) bottom(向下) 默认left numberr: "1", //每一次滚动数量 默认是1 delays:"1000",//完成一次动画所

  • JQuery 实现在同一页面锚点链接之间的平滑滚动

    web开发前端一直用JQuery ,真正接触了才体会到,JQuery 原来比我想象的要强大的多,也可能比我体会到的还要强大的多,特别是兼容性那个好,于是把一些好玩的,酷炫的,可以代替 JS 的,统统给用上了. 从 JQuery 引入今天的正题,用 JQuery 实现锚点链接之间的平滑滚动.以前介绍过一个用 JS 实现的页面锚点跳转缓冲特效,效果相当不错,可以在同一页面的锚点链接之间实现平滑的滚动,但是 JS 代码相对来说比较冗长,现在好了,只要已经加载了 JQuery,我们就可以用较为简短的代码

  • JQuery简单实现锚点链接的平滑滚动

    一般使用锚点来跳转到页面指定位置的时候,会生硬地立即跳转到指定位置,但是有些时候我们想要平滑地过渡到指定的位置,那么可以使用JQuery简单的实现这个效果: 比如,这里我们将通过点击<a>标签跳转到 id为content的指定位置那里. <a id="turnToContent" href="#content"></a> 然后呢,就在我们想要的位置设置id为content的内容块,这里用一个div模拟一篇不像文章的文章.最好将此d

  • jquery如何实现锚点链接之间的平滑滚动

    复制代码 代码如下: $('a[href*=#]').click(function() { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { var $target = $(this.hash); $target = $target.length && $target || $('[name

  • jquery滚动特效集锦

    jquery单行滚动.批量多行滚动.文字图片翻屏滚动效果代码,需要的朋友可以参考下. 以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果. 一.单行滚动效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&quo

  • jQuery实现平滑滚动页面到指定锚点链接的方法

    本文实例讲述了jQuery实现平滑滚动页面到指定锚点链接的方法.分享给大家供大家参考.具体如下: $.fn.scroller = function() { var speed = 'slow'; // Choose default speed $(this).each(function() { $(this).bind('click', function() { var target = $(this).attr('href'); // Get scroll target $(target).S

  • jQuery实现判断滚动条到底部

    判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrollTop为滚动条在Y轴上的滚动距离. clientHeight为内容可视区域的高度. scrollHeight为内容可视区域的高度加上溢出(滚动)的距离. 从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight. 废话不多少说,赶紧上代码(兼容不同的浏览器). lazyload.js

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

  • jQuery控制frames及frame页面JS的方法

    本文实例讲述了jQuery控制frames及frame页面JS的方法.分享给大家供大家参考,具体如下: <script src="jquery-1.3.2.min.js" type="text/javascript" ></script> <script> var _intervalx,steplengthx steplengthx=1000; //第一次触发时间 nextstepx=10000 ; //以后的触发时间 $(doc

  • jQuery中将json数据显示到页面表格的方法

    jQuery中将json数据显示到页面表格代码.stu模拟的就是一个数据库,假设我们的数据已经是json 的文件格式,接下来就是将这个json文件里面的数据显示到页面的表格上. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.8.3.js">&l

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

  • javaScript和jQuery自动加载简单代码实现方法

    在此之前我们给大家整理过用javaScript和jQuery自动加载的几种方法,大家可以参考一下:javaScript 页面自动加载事件详解 一.JavaScript自动加载 ①在文本中用onload: 当页面中所有内容(包括图片)加载完后再执行onload,如下: <body onload="alert(1)"></body> <!-- 当有一个onload --> <body onload="alert(2);alert(3);a

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

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

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

  • Div自动滚动到末尾的代码

    在一<div></div>内有一Table,利用js不停往table中执行insertRow(-1), div.style.overflow = "auto" 想让div在执行insertRow(-1)之后自动滚动到末尾(新行) 方法: var newRow = table.insertRow(-1); newRow.scrollIntoView();

随机推荐