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

$(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. Codeforces Gym10008E Harmonious Matrices（高斯消元）

    [题目链接] http://codeforces.com/gym/100008/ [题目大意] 给出 一个n*m的矩阵,要求用0和1填满,使得每个位置和周围四格相加为偶数,要求1的数目尽量多. [题解 ...

  2. VS2008下直接安装使用Boost库1.46.1版本号

    Boost库是一个可移植.提供源码的C++库,作为标准库的后备,是C++标准化进程的发动机之中的一个. Boost库由C++标准委员会库工作组成员发起,当中有些内容有望成为下一代C++标准库内容.在C ...

  3. Head First SQL笔记

    看的时候总结了一下,如下: Chapter 1: 创建数据库 CREATE DATABASE database_name; 使用数据库 USE database_name; 创建表 CRATE TAB ...

  4. SQL Server 数据控制语句（DCL）

    DCL控制语句用来设置更改用户或角色的权限. 授予权限操作——GRANTSQL Server服务器通过手语权限表来控制用户对数据库的访问.在数据库中添加一个新用户之后,若不尽兴额外操作,该用户只有ch ...

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

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

  6. Hibernate学习之映射关系

    一.Hibernate多对一关联映射:就是在“多”的一端加外键,指向“一”的一端. 比如多个学生对应一个班级,多个用户对应一个级别等等,都是多对一关系. 1.“多”端实体加入引用“一”端实体的变量及g ...

  7. MQTT协议详解一

    首先给出MQTT协议的查看地址:http://public.dhe.ibm.com/software/dw/webservices/ws-mqtt/mqtt-v3r1.html 当然也有PDF版的,百 ...

  8. js基础 1.简单js 语法 关键字 保留字 变量

    简单js JavaScript 是一个松散性的语言 对象属性却不想c中的结构体或者c++ 和java的对象, 对象继承机制 使用原型的prototype(原型链),js的分为三部分ECMAScript ...

  9. 利用反馈字段给帝国cms添加留言板功能（图文教程）

    帝国cms的插件中提供信息反馈字段,很多人却不会用.这里谢寒教大家如何来给自己的帝国cms网站添加留言板功能 1.找到添加地址 2.添加字段 3.你可以在字段中添加多种字段类型(有文本域,单行文本框, ...

  10. 导入jsp

    <%@ page contentType="text/html;charset=UTF-8" %><%@ page isELIgnored="false ...