<!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. windows的IIS下的负载均衡

    来自http://www.cnblogs.com/allen0118/p/4294066.html 在大型Web应用系统中,由于请求的数据量过大以及并发的因素,导致Web系统会出现宕机的现象,解决这一 ...

  2. 15款精美的 WordPress 电子商务网站模板

    在这篇文章中,我们收集了15款精美的 WordPress 电子商务网站模板.WordPress 作为最流行的博客系统,插件众多,易于扩充功能.安装和使用都非常方便,而且有许多第三方开发的免费模板,安装 ...

  3. 定时器相关 setTimeout setInterval 函数节流

    这个问题也是在参加百度的前端技术学院中遇到的 任务中需要用js实现动画  导师给的评价中setInterval会导致bug 当时不理解   下面把自己学习的过程分享出来 再次理解单线程   老是说js ...

  4. HTML5 表单新增属性

    1. 表单内元素的form属性 在H5中可以把form放到页面的任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了 <form id=&quo ...

  5. 错误 24 无法嵌入互操作类型“ESRI.ArcGIS.Geometry.PointClass”。请改用适用的接口。 E:\MyGIS\MyGIS\Form1.cs 78 37 MyGIS

    解决办法:选中那个引用,在属性页,将“嵌入互操作”设置为false

  6. YARN的内存和CPU配置

    时间 2015-06-05 00:00:00  JavaChen's Blog 原文  http://blog.javachen.com/2015/06/05/yarn-memory-and-cpu- ...

  7. NSString和SwiftString的区别和使用场景

    当下Swift项目已经越来越多,可能会经常见到  str as NSString 或者 str as String 字符串在这两者之间的来回切换,因为有些操作用OC字符串比较方便,而有些操作则相反,熟 ...

  8. Android+PHP服务器+MySQL实现安卓端的登录

    时隔已久的一个任务,今天终于可以画上一个句号了.心情是万分的激动,虽然这份小成就来的有点迟但还是按捺不住心情的澎湃.下面我就先上几张图片来展示一下我的成绩 android源代码: 首先最重要的一件事是 ...

  9. Android 下拉列表框、文本框、菜单

    1.下拉列表框(Spinner) 项目布局 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/andr ...

  10. android关于线程的那些事

    今天发现之前自己一直有个误区,new Runnable(run()方法){}原来它不是一定创建一个线程 如果用主线程的handler去post(Runnable),他就不会创建子线程,而是在主线程上执 ...