<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>test</title>

<script src="jquery-1.4.2.min.js" type="text/javascript"></script>

</head>

<style type="text/css">    

img {

border: none;

}

input, checkbox, select, img {

vertical-align: middle;

}

Inherited from div.wrap

.wrap {

text-align: left;

}

body, div, label, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, p, blockquote, th, td {

list-style: none;

}

body {

color: #333;

font: normal 12px/24px Helvetica, Tahoma, Arial, sans-serif;

text-align: center;

}

body, div, label, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, p, blockquote, th, td {

list-style: none;

}

p{

    height:100px;

}

.top_arrow {

    border: 0 none;

    bottom: 150px;

    cursor: pointer;

    display: block;

    height: auto;

    margin: 0;

    opacity: 0.5;

    padding: 0;

    position: fixed;

    right: 40px;

    width: 35px;

    z-index: 2147483647;

}

</style>

<body>

<p>段落1</p>

<p>段落2</p>

<p>段落3</p>

<p>段落4</p>

<p>段落5</p>

<p>段落6</p>

<p>段落7</p>

<p>段落8</p>

<p>段落9</p>

<p>段落10</p>

<p>段落11</p>

<p>段落12</p>

<p>段落13</p>

<p>段落14</p>

<p>段落15</p>

<img alt="Top_arrow" id="top_arrow" class="top_arrow" src="top_arrow.png" style="display: block; cursor: pointer;">

<script type="text/javascript" src="top_arrow.js?20121128"></script>

</body>

</html>

js文件代码：

$(document).ready(function(){

//首先将#top_arrow隐藏

    $("#top_arrow").hide();

//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失

    $(function () {

        $(window).scroll(function(){

            if ($(window).scrollTop()>100){

                $("#top_arrow").fadeIn(400);

            }

            else

            {

                $("#top_arrow").fadeOut(400);

            }

        });

//当点击跳转链接后，回到页面顶部位置

        $("#top_arrow").click(function(){

            $('body,html').animate({scrollTop:0},400);

            return false;

        });

    });

});

完整代码和例子下载：http://files.cnblogs.com/jackhuclan/backtop.rar

csdn回到顶端的更多相关文章

  1. js监听滚动条 回到顶端

    效果:当出现滚动条,且滚动条出现移动时,把回到顶端按钮 显示出来:当滚动条回到顶部时,将回到顶端按钮隐藏. <script type="text/javascript"> ...

  2. 回到顶端的jquery

    现在的淘宝啊,京东啊,各种网站都有一个功能,有一个按钮,在页面最顶端的时候不会显示,当往下拉到一定的时候会出现.点击他会直接跳到页面的顶端.代码如下: html代码: <div id=" ...

  3. 回到顶端js实现

    function goTop(){ var _btn = document.getElementById("goTop"); if (document.documentElemen ...

  4. JQuery 回到顶部效果

    图片,CSS/HTML/JS代码都在,可以直接用了. CSS代码 <style type="text/css"> #gs_feedback_gotop { _displ ...

  5. jQuery滚动条回到顶部或指定位置

    jQuery滚动条回到顶部或指定位置 在很多网站,为了增强用户体验,我们会看到回到顶部的按钮,不用手动拖拽滚动条就能回到顶部,非常方便.下面就介绍用jquery实现的滚动到顶部的代码 $(functi ...

  6. JS实现回到Top(顶部)--JavaScript

    当我们浏览一段很长的网页时,已经看到底部了,想回到顶部看前面的内容,可是需要滚动好几转鼠标滑轮或者拉动滚动条走好长“一段路”.这对于用户来说,体验效果是不够好的.如果我们借助简单的一个按钮,点击一下就 ...

  7. [HTML]点击按钮，页面总是跳回顶端的解决方法(Clicking an button,always resets the view to top of page)

    1 前言 当网页页面较长或者表单较多时,右侧会出现滚动条,然而经常会出现点击底部的<button>按钮或者<a>超链接,会出现点击后,当前页面会回到顶端. 2 方案 例如样例代 ...

  8. 解决ClickOnce签名过期问题（转载）

    原文地址:http://www.cnblogs.com/xuhaibiao/archive/2009/06/23/1509692.html 场景:用于生产环境的项目进行系统升级,在发布ClickOnc ...

  9. django练习——博客系统优化

    一直准备使用Django搭建一个个人网站,最近终于开始动手,上周已经完成了基本博客功能的搭建(http://blog.csdn.net/hcx25909/article/details/2460133 ...

随机推荐

  1. IOS 解析Json数据（NSJSONSerialization）

    ● 什么是JSON ● JSON是一种轻量级的数据格式,一般用于数据交互 ● 服务器返回给客户端的数据,一般都是JSON格式或者XML格式(文件下载除 外) ● JSON的格式很像OC中的字典和数组 ...

  2. java 使用mongodb

    1.先连接你的mongodb 看连接是否有问题,代码 public class MongoDB2 { private static MongoDatabase mongoDatabase = null ...

  3. DOM节点(二)：操作节点

    appendChild() 用于向childNodes列表的末尾添加一个节点. var returnedNode = someNode.appendChild(newNode); 如果传入的节点已经是 ...

  4. maven项目右键快捷方式，然后点击Run As

    在某一个maven项目右键快捷方式,然后点击Run As就可以发现几个Maven的命令: 1.Maven Build: 这个命令用于编译Maven工程,执行命令后会在target文件夹中的classe ...

  5. bpclntcmd一条神奇的命令，解决新安装nbu客户端无法连接的问题 (屡试不爽神命令)

    1. bpclntcmd案例 bpclntcmd -clear_host_cache bpclntcmd – 测试 NetBackup 系统的功能,并在 NetBackup 客户端上启用光纤传输服务 ...

  6. Visual Studio 2013 ReportViewer Control

    最近需要给学生讲报表,.NET的自然就是选择RDLC了. 因为学生比赛是用Visual Studio 2013,所以我在自己的笔记本上安装了Visual Studio 2013(平常是用2010),安 ...

  7. hihocoder1398 网络流五之最大权闭合子图

    最大权闭合子图 虽然我自己现在总结不好最大权闭合子图.但也算稍稍理解辣. 网络流起步ing~~~(-￣▽￣)- #include<iostream> #include<cstdio& ...

  8. 旧文备份:在CANopen网络中通过LSS服务设置节点地址和网络波特率

    CANopen专有个子协议用来描述怎样去通过网络设置节点地址和波特率,就是CiA DSP-305,大伙都叫LSS协议,是Layer Setting Services的缩写,不太好翻译,可以叫底层设置服 ...

  9. ES6初识-Symbol

    Symbol的概念 变量是独一无二的 let a1=Symbol(); let a2=Symbol(); a1和a2严格意义不相等 let a3=Symbol.for('a3'); let a4=Sy ...

  10. BZOJ1050: [HAOI2006]旅行comf(并查集 最小生成树)

    Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 4021  Solved: 2257[Submit][Status][Discuss] Descript ...