整理两个实现功能，一个是右下角的返回顶部，一个是右侧的返回顶部，分别如图

             

第一种实现

一、JSP或HTML(主体结构)

在body中添加

  1. <body id="top">
  2. <p id="back-to-top"><a href="#top"><span></span></a></p>
  3. </body>

二、CSS(样式化) 

  1. <style>
  2. 	p#back-to-top {
  3. 		position: fixed;
  4. 		bottom: 50px;
  5. 		right: 50px;
  6. 	}
  7.  
  8. 	p#back-to-top a {
  9. 		text-align: center;
  10. 		text-decoration: none;
  11. 		color: #d1d1d1;
  12. 		display: block;
  13. 		width: 50px;
  14. 	    /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/
  15. 		-moz-transition: color 1s;
  16. 		-webkit-transition: color 1s;
  17. 		-o-transition: color 1s;
  18. 	}
  19. 	p#back-to-top a:hover {
  20. 		color: #979797;
  21. 	}
  22. 	p#back-to-top a span {
  23. 		background: #d1d1d1 url(/img/back_to_top.png) no-repeat center center;
  24. 		border-radius: 6px;
  25. 		display: block;
  26. 		height: 50px;
  27. 		width: 50px;
  28. 		margin-bottom: 5px;
  29. 	      /*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/
  30. 		-moz-transition: background 1s;
  31. 		-webkit-transition: background 1s;
  32. 		-o-transition: background 1s;
  33. 	}
  34.  
  35. 	#back-to-top a:hover span {
  36. 		background: #979797 url(/img/back_to_top.png) no-repeat center center;
  37. 	}
  38. </style>

图片自己网上找资源

三、jQuery(动态效果)

  1. <script>
  2. $(document).ready(function() {
  3.     //首先将#back-to-top隐藏
  4.     $("#back-to-top").hide();
  5.  
  6.     //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
  7.     $(function() {
  8.         $(window).scroll(function() {
  9.             if ($(window).scrollTop() > 100) {
  10.                 $("#back-to-top").fadeIn(1500);
  11.             }
  12.             else {
  13.                 $("#back-to-top").fadeOut(1500);
  14.             }
  15.         });
  16.         //当点击跳转链接后，回到页面顶部位置
  17.         $("#back-to-top").click(function() {
  18.             $('body,html').animate({
  19.                 scrollTop: 0
  20.             },
  21.             500);
  22.             return false;
  23.         });
  24.     });
  25. });
  26. </script>

第二种实现 

  1. <style>
  2. 	.backToTop {
  3. 	display: none;
  4. 	width: 18px;
  5. 	line-height: 1.2;
  6. 	padding: 5px 0;
  7. 	background-color: #000;
  8. 	color: #fff;
  9. 	font-size: 12px;
  10. 	text-align: center;
  11. 	position: fixed;
  12. 	_position: absolute;
  13. 	right: 10px;
  14. 	bottom: 100px;
  15. 	_bottom: "auto";
  16. 	cursor: pointer;
  17. 	opacity: .6;
  18. 	filter: Alpha(opacity = 60);
  19. }
  20. </style>

  1. <script>
  2. (function() {
  3.     var $backToTopTxt = "返回顶部"
  4.     $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body")).text($backToTopTxt)
  5. 	.attr("title", $backToTopTxt).click(function() {
  6.         $("html, body").animate({
  7.             scrollTop: 0
  8.         },120);
  9.     })
  10.     $backToTopFun = function() {
  11.         var st = $(document).scrollTop(),
  12.         winh = $(window).height(); (st > 0) ? $backToTopEle.show() : $backToTopEle.hide();
  13.         //IE6下的定位
  14.         if (!window.XMLHttpRequest) {
  15.             $backToTopEle.css("top", st + winh - 166);
  16.         }
  17.     };
  18.     $(window).bind("scroll", $backToTopFun);
  19.     $(function() {
  20.         $backToTopFun();
  21.     });
  22. })();
  23. </script>

jQuery实现返回顶部功能的更多相关文章

  1. js+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a  ...

  2. javascript+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...

  3. 转载：jQuery实现返回顶部功能

    转自:http://blog.csdn.net/itmyhome1990/article/details/25340705 整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图   ...

  4. 使用jQuery实现返回顶部功能

    <p id="back-to-top"><a href="#top"><span></span>返回顶部< ...

  5. 一句jQuery代码返回顶部

    一句jQuery代码返回顶部 效果体验: http://hovertree.com/texiao/yestop/ 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: ...

  6. JQuery 实现返回顶部效果

    首先要里了解一下几个知识 $(window).scrollTop() ---滚动条距顶部距离 fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的. fadeOut() 方法使用淡出效 ...

  7. js实现返回顶部功能的解决方案

    很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...

  8. jQuery实现返回顶部

    由于项目需要,写了个返回顶部的小功能... /*返回顶部*/ function toTop() { $(".to_top").hide(); $(window).scroll(fu ...

  9. 使用Javascript实现返回顶部功能。

    为了提高网站的浏览体验及友好度,相信大部分网站需要一个返回顶部的按钮,如果使用传统的a标记,再做一个div加上链接的话,非常麻烦,不仅每个页面都需要添加,而且不能实现非常智能的效果及简化维护时间. 下 ...

随机推荐

  1. ThinkPHP 3.2 开放 cache注缓存，过滤非法字符

    打开缓存配置文件 /Application/Common/conf/cache.php源代码如下面: <?php return array( //'配置项'=>'配置值' 'LAYOUT_ ...

  2. Java数据结构与算法(1) - ch02有序表(OrderedArray)

    有序表需要掌握的插入方法,删除方法和二分法查找方法. 插入方法: 从前往后找到比要插入的值大的数组项,将该数组项及之后的项均后移一位(从最后一项起依次后移),最后将要插入的值插入当前数组项. 删除方法 ...

  3. kprobe 内核模块

    代码来自于linux内核sample/kprobe kprobe_example.c /* * NOTE: This example is works on x86 and powerpc. * He ...

  4. Cocos2d-x3.0之路--02（引擎文件夹分析和一些细节）

    关于怎么搭建好开发环境的我就不写了,网上非常多. 那么 我们来看看 引擎文件的文件夹 所谓知己知彼 百战不殆嘛 先说一下setup.py 这个文件是有关配置的python文件,比方我们在进行andro ...

  5. MVC自定义分页

    MVC自定义分页 之前我发表了一篇MVC无刷新分页的文章,里面用的是MvcPager控件,但是那个受那个控件限制,传值只能用PagedList,各方面都受到了限制,自由度不够高,现在还是做MVC无刷新 ...

  6. poj 2513 Colored Sticks(欧拉路径+并检查集合+特里)

    题目链接:poj 2513 Colored Sticks 题目大意:有N个木棍,每根木棍两端被涂上颜色.如今给定每一个木棍两端的颜色.不同木棍之间拼接须要颜色同样的 端才干够.问最后是否能将N个木棍拼 ...

  7. .Net在线付款---Paydollar在线付款开发过程

    原文:.Net在线付款---Paydollar在线付款开发过程 最近在做一个Web订单项目,项目有一个需求就是集成Paypal与Paydollar在线付款,一开始看到这个需求也是傻了眼,因为以前从来没 ...

  8. 一步一步写算法（之挑选最大的n个数）

    原文:一步一步写算法(之挑选最大的n个数) [ 声明:版权所有,欢迎转载,请勿用于商业用途.  联系信箱:feixiaoxing @163.com] 从一堆数据中挑选n个最大的数,这个问题是网上流传的 ...

  9. 用javascript把扑克牌理理顺！

    打扑克的人都知道,比如斗地主! 我们一般都会按照顺序把随机摸过来的牌从小到大的顺序在手上理整齐(记得小时候打牌两副牌手都抓不过来),这篇随笔就是想通过实现这个功能来熟悉下js中排序数组等相关知识. 用 ...

  10. 快速构建Windows 8风格应用14-ShareContract概述及原理

    原文:快速构建Windows 8风格应用14-ShareContract概述及原理 本篇博文主要介绍Share Contract概述.Share Contract实现原理.实现Share Contra ...