<!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. 初学React：组件的样式

    React中组件的样式有三种: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  2. 测试笔记：本地存储localstorage与sessionstorage

    最近测试的投票项目开发说用的是localstorage.查了下是h5的本地存储.还有个sessionstorage,区别在于sessonstorage关闭页面后清空,localstorage保留. 以 ...

  3. mysql索引和正确使用方式

    一.索引类型 B树索引:大部分都是,因此B树的特性限制了索引如何使用:必须看看索引的正确使用限制(含组合索引的限制)http://blog.csdn.net/lovemdx/article/detai ...

  4. poj 2057 树形DP，数学期望

    题目链接:http://poj.org/problem?id=2057 题意:有一只蜗牛爬上树睡着之后从树上掉下来,发现后面的"房子"却丢在了树上面, 现在这只蜗牛要求寻找它的房子 ...

  5. 使用筛法在 O(logN) 的时间内查询多组数的素数因子

    Prime Factorization using Sieve O(log n) for multiple queries 使用筛法在 O(logN) 的时间内查询多组数的素数因子 前言 通常, 我们 ...

  6. 【Java-POJO-设计模式】JavaEE中的POJO与设计模式中多态继承的冲突

    最近看<重构>谈到利用OO的多态来优化 if else 和 switch 分支语句,但是我发现OO语法中的多态在使用框架的JavaEE中是无法实践的.对此,我感到十分的疑惑,加之之前项目中 ...

  7. 第4章 初识STM32—零死角玩转STM32-F429系列

    第4章     初识STM32 集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/firege 本章参考资 ...

  8. caffe中的sgd,与激活函数(activation function)

    caffe中activation function的形式,直接决定了其训练速度以及SGD的求解. 在caffe中,不同的activation function对应的sgd的方式是不同的,因此,在配置文 ...

  9. Maven学习总结(10)

    本文通过一个例子来介绍利用maven来构建一个多模块的jave项目.开发工具:intellij idea. 一.项目结构 multi-module-project是主工程,里面包含两个模块(Modul ...

  10. Decrypt.java

    import java.io.PrintStream;import weblogic.security.internal.*;import weblogic.security.internal.enc ...