<!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. eplise中运行提示 A fatal error has been detected by the java runtime environment

    今天一同事出现运行项目时,提示 A fatal error has been detected by the java runtime environment,具体表现是使用我们框架,不能正常的打印日 ...

  2. testng失败重跑

    重跑失败场景 1.要添加两个文件 背景:因为这里只是想单独展示失败的重跑的案例,所以先暂时把app这块的运行注释掉,只跑一个简单的demo,就一个简单类,类中就3个测试方法,失败重跑的原理是,运行方法 ...

  3. 在线文本编辑器cheditor应用实例

    CKEditor 即 FCKEDITOR . FCKeditor是眼下最棒的可见就可以得网页编辑器之中的一个,它採用JavaScript编写.具备功能强大.配置easy.跨浏览器.支持多种编程语言.开 ...

  4. EF 状态版 增删改

    1.利用 状态版 实现 增加 . 2.利用状态版 进行 删除 3. 利用状态版 实现 修改 ,修改 方法 有3种 第1种修改方法 第2种修改 方法 第3种修改方法

  5. sz 命令

    sz命令 下载文件命令 sz  文件名

  6. 6、SpringBoot+Mybatis整合------参数传递

    开发工具:STS 代码下载链接:https://github.com/theIndoorTrain/SpringBoot_Mybatis/tree/7892801d804d2060774f3720f8 ...

  7. 【赛时总结】 ◇赛时·IV◇ CODE FESTIVAL 2017 Final

    ◇赛时-IV◇ CODE FESTIVAL 2017 Final □唠叨□ ①--浓浓的 Festival 气氛 ②看到这个比赛比较特别,我就看了一看--看到粉粉的界面突然开心,所以就做了一下 `(* ...

  8. 爬虫学习（十一）——bs4基础学习

    ba4的介绍: bs4是第三方提供的库,可以将网页生成一个对象,这个网页对象有一些函数和属性,可以快捷的获取网页中的内容和标签 lxml的介绍 lxml是一个文件的解释器,python自带的解释器是: ...

  9. Java OOP——第七章 多线程

    1.进程:是指运行中的应用程序,每个进程都有自己独立的地址空间(内存空间): Eg:用户点击桌面的IE浏览器,就启动了一个进程,操作系统就会为该进程分配独立的地址空间.当用户再次点击左面的IE浏览器, ...

  10. 页面刷新 方法总结 JSP刷新

    1) <meta http-equiv="refresh"content="10;url=跳转的页面"> 10表示间隔10秒刷新一次 2) < ...