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

$(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. php在apache中运行模式

    php在apache中运行模式 (2011-12-18 02:38:27) 标签: 杂谈 分类: 服务器及软件 一.php在php在三种工作方式:Apache 模块DLL) 以下分别比较: 1. ph ...

  2. 普通IT和文艺IT工程师的区别

    在一个UITableView的editing设置的方法实现过程中,我想到两种写法,顺便想了一下两种方法的区别.觉得这时一个普通IT工程师和NB工程师的区别一个有趣的印记. 您通常时怎么去实现的呢? - ...

  3. AsyncSocket的长连接使用

    使用背景:需要跟服务器长期保持连接进行即时通讯:还有在跟智能硬件建立实时链接进行同步智能硬件的状态等,最近我就做项目就碰到需要实时更新智能硬件的状态(比如智能硬件的电量,以及其它工作状态),跟智能硬件 ...

  4. [NOIP2013提高组] CODEVS 3287 火车运输(MST+LCA)

    一开始觉得是网络流..仔细一看应该是最短路,再看数据范围..呵呵不会写...这道题是最大生成树+最近公共祖先.第一次写..表示各种乱.. 因为要求运输货物质量最大,所以路径一定是在最大生成树上的.然后 ...

  5. android手机关于google play商店闪退的解决办法

    部分android手机没有安装google play商店,这个可以通过类似“机锋”.“360手机助手”等应用市场下载. 安装google play商店后,点击打开却一闪而过:这个问题是因为手机没有安装 ...

  6. 【算法】求多个数组中的交集（Java语言实现）

    简介: 最近在工作中遇到一个问题,需要离线比较两张Mongodb表的差异:大小差异,相同的个数. 所以,我将导出的bson文件转成了json文件(2G以上),一条记录正好是一行. 问题: 因此我将以上 ...

  7. python 以面向对象的方式创建线程 实现售票系统

    ---恢复内容开始--- 转载或借鉴请注明转自http://www.cnblogs.com/FG123/p/5068556.html   谢谢! 通过面向对象的方法实现多线程,其核心是继承thread ...

  8. 将默认首页设置成index.do的方法

    变态欺骗法,今天csdn一个前辈的,学习了,公司服务器是weblogic的,也可以欺骗. 但是我又非常迫切.非常盼望.非常渴望使用index.do做首页,怎么办? Tomcat中用一段注释: When ...

  9. Qt的目录依赖问题----怎样生成一个绿色的Qt软件包

    Qt的目录依赖问题----怎样生成一个绿色的Qt软件包 一.核心问题: 如果将编译好的Qt文件拷贝到任何目录下,作为一个绿色软件库来使用? 二.原理讨论 由于Qt在编译的时候将安装路径硬编码到了库文件 ...

  10. COM编程之IUnknown接口

    COM组件其实是一种特殊的类,遵循一个统一的标准,使到各个软件都可以通过某种方法访问这个类的函数和方法,也就可以做到组件通用. com就是统一的标准--通过接口来调用com组件.接口是你的com组件能 ...