<!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. Altium_Designer如何快速寻找元件和封装

    初学Altium碰到最多的问题就是:不知道元件放在哪个库中.这里我收集了DXP2004常用元件库下常见的元件.使用时,只需在libary中选择相应元件库后,输入英文的前几个字母就可看到相应的元件了.通 ...

  2. 【转载】#335 - Accessing a Derived Class Using a Base Class Variable

    You can use a variable whose type is a base class to reference instances of a derived class. However ...

  3. VUE的组件DEMO

    组件的基本写法可以如下: HTML: <div id="components-demo"> <button-counter self-data="thi ...

  4. eplise一键集成工具

    因为要做平台,后台的内容就由我负责,目前想让测试人员  在本地使用eplise可以进行脚本开发,但是很多人都死在了搭建环境的道路上,那我就做了一键集成,点击就可以把所需要的配置项进行配置,总结:实际就 ...

  5. 【CF660E】Different Subsets For All Tuples（组合数学）

    点此看题面 大致题意: 有一个长度为\(n\)的数列,每个位置上数字的值在\([1,m]\)范围内,则共有\(m^n\)种可能的数列.分别求出每个数列中本质不同的子序列个数,然后求和. 一些分析 首先 ...

  6. P1823 Patrik 音乐会的等待

    题目描述 N个人正在排队进入一个音乐会.人们等得很无聊,于是他们开始转来转去,想在队伍里寻找自己的熟进行谈笑风生.队列中任意两个人A和B,如果他们是相邻或他们之间没有人比A或B高,那么他们是可以互相看 ...

  7. 基于px2rpx-loader，探讨一下loader的封装思想

    本文以px2rpx-loader的源码为学习对象,了解其工作机制以及loader封装的思想. 1.前言 最近在了解mpvue框架的时候,对于其能够实现一套代码兼容web和微信小程序(以下简称小程序)的 ...

  8. PBJVision 快速在应用中集成相机/拍摄功能

    PBJVision 简介 PBJVision, 是一个iOS相机操作的封装库,可以让你的应用快速简单地继承相机相关功能. 项目主页: PBJVision 最新示例:点击下载 注意: 示例需要在真机上运 ...

  9. ethereum(以太坊)(十一)--字节数组(二)

    pragma solidity ^0.4.0; contract test { uint [5] T =[1,2,3,4,5] ;//固定长度的数组:可修改数组内值大小,不支持push,不可更改长度 ...

  10. #Python编程从入门到实践#第二章笔记

      ​​​1.变量 (1)变量名只能包含字母.数字和下划线,不能包含空格 (2)不要将python关键字与函数名作为变量名 (3)简短有描述性,避免使用小写字母l和大写字母O (4)python 始终 ...