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

$(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. BZOJ 1635: [Usaco2007 Jan]Tallest Cow 最高的牛

    题目 1635: [Usaco2007 Jan]Tallest Cow 最高的牛 Time Limit: 5 Sec  Memory Limit: 64 MB Description FJ's N ( ...

  2. uva 10905 Children's Game (排序）

    题目连接:uva 10905 Children's Game 题目大意:给出n个数字, 找出一个序列,使得连续的数字组成的数值最大. 解题思路:排序,很容易想到将数值大的放在前面,数值小的放在后面.可 ...

  3. [Ext JS 4] 布局之实战一 - 中间区块不会自动伸展 （tab）

    前言 [Ext JS 4] 布局之实战一 - 中间区块不会自动伸展 (tab) 在上一篇中,中间的tab 区块无法自动伸展的原因一句话说就是: 使用contentEL的方式,相关HTML元素不会参与组 ...

  4. tomcat的JK和JK2

    如今又開始配置JK2,想将Tomcat和apache,但Tomcat上已经不支持对于JK2的开发了,详情请看: Apache-Tomcat mod_jk2 aka JK2 15 November - ...

  5. VS C++工程类成员初始化检测脚本

    最近项目中出现由类成员未初始化而进行读写而造成的问题,于是想将项目中所有的为初始化的地方找出来,优化一下代码,维护了这么多年的程序已有百万余行且VS2015还尚未支持检查类成员初始化的方法.,于是想写 ...

  6. objective-C学习笔记（五）函数成员：初始化器和析构器

    初始化器:init 对象初始化器: -(id)init 可以重载多个. 类型初始化器: +(id)initialize只能有一个. 对象初始化器: 初始化对象实例时,init通常和alloc(手动内存 ...

  7. 关于已经安装python为何还要安装python-dev

    linux发行版通常会把类库的头文件和相关的pkg-config分拆成一个单独的xxx-dev(el)包. 以python为例, 以下情况你是需要python-dev的 你需要自己安装一个源外的pyt ...

  8. Symfony命令行

    Available commands:  help                                  显示命令的帮助信息  list                           ...

  9. 编写带参数decorator

    无参的@log装饰器: def log(f): def fn(x): print 'call ' + f.__name__ + '()...' return f(x) return fn 发现对于被装 ...

  10. 什么是PCB改板及PCB改板应注意的问题

    PCB改板是指在保持原有功能一致的前提下,对原有产品设计及电路板布局走线设计的基础上进行整改设计,调整板上器件布局与线路走向,实现电子产品重新设计研发,同时又可以规避知识产权等纠纷,加快新产品研发速度 ...