首先要里了解一下几个知识

$(window).scrollTop() ---滚动条距顶部距离

fadeIn() 方法使用淡入效果来显示被选元素，假如该元素是隐藏的。

fadeOut() 方法使用淡出效果来隐藏被选元素，假如该元素是隐藏的。

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。详细可参考：http://www.w3school.com.cn/jquery/effect_animate.asp

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Web.Default" %>
  1.  
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  1. <head runat="server">
  1.     <title></title>
  1.     <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
  1.     <link href="Base.css" rel="stylesheet" type="text/css" />
  1.     <style type="text/css">
  1.         
  1.         .top
  1.         {
  1.             background: url("img/a.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  1.             bottom: 32px;
  1.             display: block;
  1.             height: 58px;
  1.             position: fixed;
  1.             right: 18px;
  1.             width: 58px;
  1.         }
  1.     </style>
  1.     <script type="text/javascript">
  1.         $(document).ready(function () {
  1.  
  1.             //首先将#back-to-top隐藏
  1.             $("#back-to-top").hide();
  1.             //当滚动条的位置处于距顶部10像素以下时，跳转链接出现，否则消失
  1.             $(function () {
  1.                 $(window).scroll(function () {
  1.                     if ($(window).scrollTop() > 10) {
  1.                         $("#back-to-top").fadeIn(1000);//淡入显示
  1.                     }
  1.                     else {
  1.                         $("#back-to-top").fadeOut(1000);//淡出隐藏
  1.                     }
  1.                 });
  1.                 //当点击跳转链接后，回到页面顶部位置
  1.                 $("#back-to-top").click(function () {
  1.                     $('body,html').animate({ scrollTop: 0 }, 300);
  1.                     return false;
  1.                 });
  1.             });
  1.           
  1.         });
  1.             
  1.      
  1.        
  1.     </script>
  1. </head>
  1. <body>
  1.     <form id="form1" runat="server">
  1.     <div>
  1.       
  1.            <h1 style="text-align: center;">利用jQuery实现返回顶部效果</h1>
  1.           <div style="width: 800px; height:300px; border: 1px; text-align: left; margin:850px auto;">
  1.             。。。。。。(很多内容,可以滚动)
  1.          </div>
  1.        
  1.        <a href="#" id="back-to-top" class="top" title="返回顶部"> </a> 
  1.      </div>
  1.     </form>
  1. </body>
  1. </html>

JQuery 实现返回顶部效果的更多相关文章

  1. 一句jQuery代码返回顶部

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

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

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

  3. 使用jquery实现返回顶部按钮

    实现返回顶部效果,首先需要监听页面的scroll事件,其次才是获取到页面当前的滚动高度 $(window).scrollTop(); 具体代码如下: jquery获取页面元素的一些边界值(宽,高,滚动 ...

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

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

  5. jq-animate实现返回顶部效果

    jq-animate实现返回顶部效果: <!doctype html> <html lang="en"> <head> <meta cha ...

  6. WEB返回顶部效果

    1. PC端页面返回顶部效果 1 $( window ).scroll(function(){ 2 if( $( window ).scrollTop() > 500 ){ // 当顶部的滚动距 ...

  7. JavaScript实现返回顶部效果

    仿淘宝回到顶部效果 需求:当滚动条到一定位置时侧边栏固定在某个位置,再往下滑动到某一位置时显示回到顶部按钮.点击按钮后页面会动态滑到顶部,速度由快到慢向上滑. 思路: 1.页面加载完毕才能执行js代码 ...

  8. 简约的返回顶部效果（jQuery）

    博客建好也快一个月了,主题是在原有主题的基础上做的修改,喜欢这样的清新简约风格,为了更好的体验,以后也会经常做修改. 一般博客的文章都比较长,看到下面不能快速返回到顶部还真是不方便,今天自己动手写了一 ...

  9. jQuery 返回顶部效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. ubuntu 常用生产环境部署配置测试调优

    1,ubuntu monogdb 安装配置 2,ubuntu jdk1.7,tomcat7安装 3,ubuntu LAMP部署 4,mongodb 远程热备份及恢复 使用自带的mongodump和mo ...

  2. Oracle 生成指定范围内随机日期

    Oracle生成一个指定范围内的随机日期 /* 年1月1日)的整数偏移量来保存(即把日期保存为一个数字); * 因此可通过寻找‘指定日期’与‘关键日期’相对应的整数偏移量,再加一个指定范围内的随机整数 ...

  3. SSDP协议的Android实现以及使用

    前面一篇博客里面已经介绍过SSDP协议原理,本篇博客将实现实现Android上的SSDP协议. 关键技术分析:1.发送广播:须要发送送广播,所以须要使用MulticastSocket.SocketAd ...

  4. Extjs 3.4 生成button,并調用相同的window

    /////定義一個方法,用來調用win_mucangjieshou的窗口 var panel_contant= function(id_name){ var aa=Ext.getCmp(id_name ...

  5. ubuntu16.04安装kde桌面出错： /var/cache/apt/archives/kde-config-telepathy-accounts_4%3a15.12.3-0ubuntu1_amd64.deb

    出错提示: 正在读取软件包列表... 完成 正在分析软件包的依赖关系树 正在读取状态信息... 完成 kubuntu-desktop 已经是最新版 (1.338). 您可能需要运行“apt-get - ...

  6. Java学习之抽象类的总结

    抽象类的特点:1,方法只有声明没有实现时,该方法就是抽象方法,需要被abstract修饰,抽象方法必须定义在抽象类中,该类必须也被abstract修饰.2,抽象类不可以被实例化.为什么?因为调用抽象方 ...

  7. 自定义jquery表格插件

    以前一直都是再用easyui插件来实现各种功能,但是easyui太过于庞大,使用越多对服务器负载影响越大. 基于此,在模仿easyui的dataGrid表格插件的同时,自己去封装了一个.实现了基本的j ...

  8. 字符串匹配算法1-KMP

    前面介绍过,字符串搜索一般来说有三种方式,前缀搜索,后缀搜索,子串搜索.KMP使用的是前缀搜索. 假设p的偏移是i,也就是窗口的位置是i,匹配到位置j+1时发现了不匹配.现在的问题是向前移动窗口到什么 ...

  9. Round B APAC Test 2017

    https://code.google.com/codejam/contest/5254487 A. Sherlock and Parentheses Problem Sherlock and Wat ...

  10. JBoss Jopr

    http://rhq.jboss.org/ https://issues.jboss.org/browse/JBPAPP6-947 挺好的网站: http://outofmemory.cn/code- ...