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

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

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

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

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

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

    GT and sequence  Accepts: 385  Submissions: 1467  Time Limit: 2000/1000 MS (Java/Others)  Memory Lim ...

  2. j详细说明ava于clone办法

    原文地址:http://leihuang.org/2014/11/14/java-clone/ In java, it essentially means the ability to create ...

  3. Unslider – 轻量的响应式 jQuery 内容轮播插件

    Unslider 是一款非常轻量的 jQuery 插件(压缩后不到3KB),能够用于任何 HTML 内容的滑动. 可以响应容器的大小变化,自动排布不用大小的滑块.可以通过整合 jQuery.event ...

  4. 实现一个在autolayout下有宽度约束后，自动确定高度的view

    我曾经遇到过一个问题:需要实现一个自定义的label(类似于UILabel),同时需要兼顾UILabel的大小自适应的特性.这个label通常宽度是固定的,通过autolayout指定其宽度约束,但不 ...

  5. C#DB2开发问题随记

    最近公司有个小工具需要用到DB2数据库,以前没玩过DB2,觉得应该很容易就实现了. 这个小工具最开始用了Nhibernate来连接DB2,Nhibernate也是第一次用..实在是惭愧啊... 第一次 ...

  6. BZOJ 1046: [HAOI2007]上升序列(LIS)

    题目挺坑的..但是不难.先反向做一次最长下降子序列.然后得到了d(i),以i为起点的最长上升子序列,接下来贪心,得到字典序最小. ----------------------------------- ...

  7. C++对象模型2--指针cout结果

    在开始之前,首先科普一下cout指针的知识,这样才能在测试程序中很好的理解: 看下面的代码: void main(void) { int a = 10; int *p = &a; cout & ...

  8. Hadoop 相关问题

    1.MR Job 输入非常多,启动map 非常多,如何提高MapTask 启动速度(附加条件:集群很空闲,资源多多): 参考答案: a.重写调度器算法,降低时间复杂度 b.Out-of-bound h ...

  9. Android Developers:按需求加载视图

    有时候你的布局可能需要较少使用的复杂视图.无论它们是项目详情,进度指示器,或者处理的信息,你能通过在它们被需要的时候加载的方式,来减少内存消耗和加快显示. 定义一个ViewStub ————————— ...

  10. (转)C++中extern “C”含义深层探索

    (转)C++中extern “C”含义深层探索 转自: http://www.cppblog.com/Macaulish/archive/2008/06/17/53689.html 1.引言 C++语 ...