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

$(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. 《windows程序设计》学习_3.1：画出雷区，左键的使用

    #include<windows.h> #include "resource.h" LRESULT CALLBACK WndProc (HWND, UINT, WPAR ...

  2. xcode 工具栏中放大镜的替换的简单说明

    1.如果是在打开的文档范围内:       查找: Command+ F       替换: Option+Command+F                   Replace All   是全部替 ...

  3. Node.js 小工具--supervisor

    Node.js 在写文件的时候 一旦更改.每次都得重新运行 app.js. 很麻烦. supervisor 工具可以帮助你 监听文件改动,自动重启. sudo npm install -g super ...

  4. 关于js封装框架类库之选择器引擎（一）

    选择器模块之传统做法 var tag = function (tag){ return document.getElementsByTagName(tag); } var id = function ...

  5. SQL Server使用LIKE运算符进行匹配查询

    在查询的过程中,如果遇到不能明确的指明查询的限定条件时,就会用到LIKE运算符进行模式匹配查询.在查询时可以使用如下几个通配符: %:包含零个或多个字符的任意字符串 —(下划线):任何单个字符 []: ...

  6. Android Gradle 配置选项合集

    //让gradle 引入构建安卓app的插件 apply plugin: 'com.android.application' //自定义变量, 使用的时候不需要 ext 前缀 ext { minSdk ...

  7. poj 2653 计算几何

    #include <iostream> #include <cstring> #include <algorithm> #include <cmath> ...

  8. 【转】vs2008中leptonica-1.68安装配置

    tesseract ocr挺不好配置的,找到一篇不错的文章,分享如下:http://hi.baidu.com/ever8936/blog/item/6998e1196b1d0161dab4bd8f.h ...

  9. Primavera 6.0

    Primavera 6.0(原p3e/c)荟萃了P3软件20年的项目管理精髓和经验,采用最新的IT技术,在大型关系数据库Oracle和MS SQL Server上构架起企业级的.包涵现代项目管理知识体 ...

  10. 可以放在html代码中的自动跳转代码

    可以放在html代码中的自动跳转代码 有3种方法可以实现html的页面跳转,1,refresh   2,onload事件中加入代码  3,js实现 1.<html><body> ...