<!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. SAP UI5和CRM WebUI的View和Controller是如何绑定的

    UI5 例如我在UI5的界面上画一个按钮,点击之后弹出一个Alert dialog. 在XML view里只定义了controller的名称和事件处理函数的名称.那么按钮被点击之后,controlle ...

  2. IOS GCD03-其他用法

    #define global_queue dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0) #define main_queu ...

  3. 贪心，二叉树搜索，ZOJ(2315)

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1315 解题报告: #include <stdio.h> ...

  4. python selenium 模块的安装及使用

    安装 pip install selenium 或者到https://pypi.python.org/pypi/selenium 下载setup安装包,之后进入目录后运行python setup.py ...

  5. GPGPU::数学基础教程

    并行方向需要学习的数学知识 http://dev.gameres.com/Program/Visual/3D/GPGPU_math_Tutorial.html

  6. data-ng-repeat 指令

    data-ng-repeat指令对于集合中的每一项会克隆一次HTML元素.

  7. convolution,fft, 加速

    零零星星挖坑几个了,都没填土,实在是欠账太多,闲话少说吧,还是多记录总结一下.今天的主题是围绕convolution和加速 记得之前看过lecun他们组的一篇文章,是fft加速convolution的 ...

  8. linux命令详解-useradd，groupadd

    linux命令详解-useradd,groupadd 我们在linux命令行中输入useradd: Options:  -b, --base-dir BASE_DIR       base direc ...

  9. java基础必备单词讲解 day three

    if 如果 else 否则 switch 切换判断 case 实例 break 退出 return 返回 default 默认 variable array 数组 null 空的 无效的 pointe ...

  10. vue登录插件引来的后续问题

    上次介绍了下写的登录弹框插件,过了几天发现点击去注册或者改密码的跳转失效.报错this.$router.push is not a function,继续打印this.$router也是undefin ...