用jQuery实现的智能隐藏、滑动效果的返回顶部代码

2024-09-26 21:01:10

在线DEMO：传送门

HTML代码（放在页面任意位置，并用CSS美化）：

代码如下:

JS代码：

<script type="text/javascript" src="js/jquery-1.7.2.min.js">
</script>
<script type="text/javascript">
  $(document).ready(function() {
    //首先将#back-to-top隐藏
    $("#back-to-top").hide();
    //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
    $(function() {
      $(window).scroll(function() {
        if ($(window).scrollTop() > 100) {
          $("#back-to-top").fadeIn(1500);
        } else {
          $("#back-to-top").fadeOut(1500);
        }
      });
      //当点击跳转链接后，回到页面顶部位置
      $("#back-to-top").click(function() {
        $('body,html').animate({
          scrollTop: 0
        },
        1000);
        return false;
      });
    });
  });
</script>

下面再来一个简单点的返回顶部的代码：

效果先看演示：http://demo.jb51.net/js/2016/gotop/

完整代码：

<!DOCTYPE html>
<html>
<head>
<title>基于jquery的返回顶部效果</title>
<script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery.min.js"></script>
<style type="text/css">
#goTop{position:absolute;display:none;width:50px;height:48px;background:#fff url(http://zsrimg.ikafan.com/file_images/article/201601/gotop.png) no-repeat 16px 15px;border:solid 1px #f9f9f8;border-radius:6px;box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);cursor:pointer}
#goTop:hover{height:50px;background-position:16px 16px;box-shadow:0 1px 1px rgba(0, 0, 0, 0.3)}
</style>
</head>
<body>
<div style="height:2000px; text-align:center; padding-top:300px">想看到效果就需要拖动滚动条到下面，靠右下角的位置就可以看到</div>
<div id="goTop" class="goTop"></div>
<script type="text/javascript">
	$(window).scroll(function(){
		var sc=$(window).scrollTop();
		var rwidth=$(window).width()+$(document).scrollLeft();
		var rheight=$(window).height()+$(document).scrollTop();
		if(sc>0){
			$("#goTop").css("display","block");
			$("#goTop").css("left",(rwidth-80)+"px");
			$("#goTop").css("top",(rheight-120)+"px");
		}else{
			$("#goTop").css("display","none");
		}
	});
	$("#goTop").click(function(){
		$('body,html').animate({scrollTop:0},300);
	});
</script>
</body>
</html>

JQuery 动画卷页返回顶部动画特效(兼容Chrome)

首先给这些'返回页首'的链接加上个Class: <a href="#" class="backtotop" target="_self">返回页首↑</a> 然后加入下面jQuery代码,你可以把这行代码放在</body>前,或者其它位置.当然你还要在<head>里包含jQuery库文件.( 复制代码代码如下:
基于jquery的返回顶部效果（兼容IE6）

最近也在学jquery,就顺便记录一下了. HTML 复制代码代码如下: <div class="scroll"></div> <script type="text/javascript" src="../skins/css/jQuery.js" charset="UTF-8"></script> <script type="text/javascript&qu
jQuery scrollFix滚动定位插件

当用户向上或向下滚动页面到一定位置时,目标元素开始固定定位(position:fixed),当回滚到原位置时目标元素恢复到原状态,可以定制触发滚动相对屏幕位置和触发滚动方向,兼容IE6 [插件参数] $(".target_element").scrollFix( [ "top" | "bottom" | length(可以为负,表示相对bottom), [ "top" | "bottom" ] ]); 第一
js+JQuery返回顶部功能如何实现

很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p>其中a标签指向锚点top,可以在顶部防止一个<a name="top"></a>的锚点,这样在浏览器不支持js时也可以
jQuery返回定位插件详解

一.jQuery 提供开发者开发插件的几种模式 1.$.extend(); //这个方法是绑定在$上面的.可以通过$直接调用 2.$.fn.方法名 //这个方法是绑定在Dom对象上面的可以通过$('').方法名();调用 3.$.widget //通过jQuery UI 部件工厂模式创建. 二.插件的开发过程 1.$.extend(); 这个方法其实很简单,只是像$上面添加了一个静态的方法而已.主要用途是对插件api的扩展. eg: //$.extend();为了防止,变量和
jquery左边浮动到一定位置时显示返回顶部按钮

复制代码代码如下: <script> $(function(){ $(window).bind('scroll',function(){ if ($(document).scrollTop() >200) { $(".asd-return").show(1); }else{ $(".asd-return").hide(1); } }) $(".asd-return").click(function(){ $('body,htm
用jQuery实现的智能隐藏、滑动效果的返回顶部代码

在线DEMO:传送门 HTML代码(放在页面任意位置,并用CSS美化): 复制代码代码如下: <p id="back-to-top"><a href="#top"><span></span>回到顶部</a></p> JS代码: <script type="text/javascript" src="js/jquery-1.7.2.min.js"&g
jquery实现鼠标拖拽滑动效果来选择数字的方法

本文实例讲述了jquery实现鼠标拖拽滑动效果来选择数字的方法.分享给大家供大家参考.具体如下: 这是使用jquery ui实现的一个精美实用的效果,可以通过鼠标拖拽滑动效果来选择数字 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns
jquery简单实现带渐显效果的选项卡菜单代码

本文实例讲述了jquery简单实现带渐显效果的选项卡菜单代码.分享给大家供大家参考.具体如下: 带渐显效果的选项卡菜单,使用了jQuery共同完成的效果,鼠标点击选项卡之后,出现渐变(淡入淡出效果),让网页看上去更生动. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-cha-style-tab-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)

本文实例讲述了jquery实现仿新浪微博带动画效果弹出层代码.分享给大家供大家参考.具体如下: 这是一款jquery实现带动画的弹出层,最开始是模拟新浪微博中的弹出层,后来引入了jQuery,又想了想,加入点动画效果不知怎么样,后来就写出了这么一个弹出的网页层效果,你点击按钮后就可以看到一个渐出的可关闭的弹出层,点击关闭后,当然也是渐渐的消失的,移动时根据鼠标位置计算控件左上角的绝对位置,松开鼠标后停止移动并恢复成不透明. 运行效果截图如下: 在线演示地址如下: http://demo.jb51
ASP.NET jQuery 实例9 通过控件hyperlink实现返回顶部效果

要实现该效果,首先要先了解以下几点基础知识: 窗体滚动事件:$(window).scroll(function(){...}); 获取窗体滚动距离:$(window).scrollTop(); 获取窗体高度:$(window).height(); 了解以上内容就可以实现通过hyperlink控件实现返回顶部的效果了. 1.准备界面结构代码: 复制代码代码如下: <form id="form1" runat="server"> <div> &
ASP.NET jQuery 实例9 通过控件hyperlink实现返回顶部效果

要实现该效果,首先要先了解以下几点基础知识: 窗体滚动事件:$(window).scroll(function(){...}); 获取窗体滚动距离:$(window).scrollTop(); 获取窗体高度:$(window).height(); 了解以上内容就可以实现通过hyperlink控件实现返回顶部的效果了. 1.准备界面结构代码: 复制代码代码如下: <form id="form1" runat="server"> <div> &
jquery小火箭返回顶部代码分享

这是一款基于jquery小火箭返回顶部特效源码,解决了页面太长造成的用户返回页面顶端困难. 为大家分享的jquery小火箭返回顶部代码如下 <head> <title>jquery小火箭返回顶部代码</title> <link href="css/top.css" rel="stylesheet" type="text/css"/> </head> <body style=&quo
用原生js做个简单的滑动效果的回到顶部

很多网页在下方都会放置一个"返回顶部"按钮,尤其是页面底部没有导航的网页,这样可以帮助访客重新找到导航或者重温一遍广告(想得真美).随着近几年来 JavaScript 的应用日渐广泛,滑动效果无处不在,于是我也跟跟风,将返回顶部功能做成了滑动效果.后来为了更贴合物理特征, 改造做成了减速的滑动效果. 首先说一下原理吧,我们会获取滚动条到页面顶部的距离,然后上移一定的距离:再获取滚动条到页面顶部的距离,上移一定的距离(比上一次小一点);以此类推 ... <script type=&
jQuery实现下拉菜单滑动效果

当我们制作网页时,有的时候会想拥有一个酷炫且顺滑的下拉菜单,虽然我们使用最基础的css和js也可以完成,但利用jQuery我们只需要非常简短的代码即可完成下面的效果是不是非常的顺滑呢?鼠标移动到目标上自动的下拉菜单 ,只需要这样两行代码: $(" ").hover(function() { $(this).children(" ").slideToggle(); }); 其中,hover是鼠标经过和离开的复合写法,通常会这样写 $(" ").h

用jQuery实现的智能隐藏、滑动效果的返回顶部代码

相关推荐

随机推荐