<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Back to top</title>

    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>

    <style type="text/css">

        .back-to-top {

            position: fixed;

            bottom: 50px;

            right: 150px;

            background:url(btn_top.png) no-repeat; 

            display: none;

            height:49px;

            width:49px;

            cursor: pointer;

        }

        body{

            height:1500px;

        }

    </style>

</head>

<body>

    <div id="back-to-top"  class="back-to-top "></div>

</body>

</html>

<script type="text/javascript">

    $(document).ready(function () {

        $(window).scroll(function () {

            if ($(this).scrollTop() > 0) {

                $('#back-to-top').fadeIn();

            } else {

                $('#back-to-top').fadeOut();

            }

        });

        // scroll body to 0px on click

        $('#back-to-top').click(function () {

            $('body,html').animate({

                scrollTop: 0

            }, 500);

            return false;

        });

    });

</script>

另有jquery back to top plugin http://www.igloolab.com/back-to-top/

jquery back to top 页面底部的返回顶部按钮的更多相关文章

  1. vue进入页面时不在顶部，检测滚动返回顶部按钮

    这里是本小白使用时遇到的问题及个人使用的方法可能并不完美. 1.监测浏览器滚动条滚动事件及滚动距离 dmounted() { window.addEventListener("scroll& ...

  2. UWP 返回顶部按钮

    返回顶部的按钮,like this 当用户下滑了一定的距离之后,通常是快滑倒底部的时候,出现返回顶部按钮,当用户向上快滑,滑到顶部的时候,返回顶部按钮自动消失. 在UWP中,用来滚动内容的控件是Scr ...

  3. 【Android】ListView监听上下滑动（判断是否显示返回顶部按钮

    设置滚动监听判断ListView的滚动方向同时获取屏幕高度.ListView实际高度,判断是否需要展示返回顶部按钮 package com.zihao.activity;   import java. ...

  4. jquery load加载页面内ajax返回的div不能响应页面js的问题的解决方案

    1. 前言 由于项目需要,需要load一个页面并保持ajax返回的div能响应其页面内的JS的click事件.这个不是 解决用jquery load加载页面到div时,不执行页面js的问题 这类问题, ...

  5. javascript&jquery 判断滚动到页面底部

      js 判断滚动到页面底部 CreateTime--2018年4月14日10:13:07 Author:Marydon 1.使用场景: 滚动到屏幕底部,触发加载分页数据请求(qq空间,手机端) 2. ...

  6. 使用jquery实现返回顶部按钮

    实现返回顶部效果,首先需要监听页面的scroll事件,其次才是获取到页面当前的滚动高度 $(window).scrollTop(); 具体代码如下: jquery获取页面元素的一些边界值(宽,高,滚动 ...

  7. chrome浏览器页面获取绑定返回顶部动画事件插件

    在chrome浏览器下页面加载: var top = $("body").scrollTop()  ; console.log(top)                      ...

  8. 在页面中有overflow-y:auto属性的div,当出现滚动条，点击返回顶部按钮，内容回这个div最顶部

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. ajax——三级联动下拉列表框的优化（简化页面，用jquery插件代替原来页面代码，返回处理数据类型为"TEXT"）

    数据库: 主页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

随机推荐

  1. 推荐15款最佳的响应式 Web 设计测试工具

    响应式网页设计是根据设备的屏幕尺寸,平台和方向来开发的网页,是一种对最终用户的行为和环境作出反应的方法.响应式设计使用灵活的网格和布局,图像和智能使用 CSS 媒体查询的组合.当从它们在不同设备使用的 ...

  2. 13个风格独特的关于页面（About Pages）设计

    如何向其他人呈现你自己和你的作品呢?关于页面的设计是非常重要的,以让你的观众更多地了解你,你的工作和你的想法.这是一个很好的方式来获得更加个性化的展示效果. 设计一个漂亮的关于页面是具有挑战性的.出于 ...

  3. javascript中关于数组的一些鄙视题

    一.判断一个数组中是否有相同的元素 /* * 判断数组中是否有相同的元素的代码 */ // 方案一 function isRepeat1(arrs) { if(arrs.length > 0) ...

  4. SAP ABAP将大数据量排序后输入到内表

    要向内表读入3百50万条数据,如果一次读入就会产生运行错误,错误提示为,没有内存对于扩展 内表. 我考虑使用SELECT...INTO TABLE...PACKAGE SIZE 和ENDSELECT来 ...

  5. SharePoint 2013 使用 PowerShell 更新用户

    在SharePoint开发中,经常会遇到网站部署,然而,当我们从开发环境,部署到正式环境以后,尤其是备份还原,所有用户组的用户,还依然是开发环境的,这时,我们就需要用PowerShell更新一下: P ...

  6. Autodesk招聘开发咨询顾问（北京或上海），需要内推的扔简历过来啊

    Autodesk现招聘两位二次开发技术顾问,为正式编制.享受所有Autodesk优越的福利资源(额外商业保险,公积金全部由公司支付,年度奖金,季度礼物, 节日礼物, 15天年假,不定期的培训...). ...

  7. JSON解析实例——使用Json-lib

    JSON解析实例——使用Json-lib Json-lib下载及使用 本文介绍用一个类库进行JSON解析. 工具下载地址:http://sourceforge.net/projects/json-li ...

  8. Android环境搭建和编写helloworld

    一.配置jdk环境(学过java的请无视) 1.安装jdk jdk下载地址:http://www.oracle.com/technetwork/cn/java/javase/downloads/jdk ...

  9. iOS 为视图添加抖动效果

    抖动效果在开发中比较少用到,不过有时使用了确有个很好的装逼效果,用的时候就例如一些用户错误操作之类的 效果如下,不过gif看到的效果没实际的好看 上代码 - (void)shakeAnimationF ...

  10. Node异步I/O、事件驱动与高性能服务器

    事件循环.观察者.请求对象.I/O线程池这四者共同构成了Node异步I/O模型的基本要素. 异步I/O流程: