<!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. Ubuntu Desktop 15.10 自带桌面共享问题修复

    Ubuntu 15.10 (似乎从14.04开始) 的小坑,使用自带远程桌面连接出错,弄得我很不爽,偶尔从 youtube 上看到一视频,解决了.聊以记之. 顺便说一下,这个自带的桌面共享的名字是:v ...

  2. swift学习笔记之-属性

    //属性 import UIKit //属性(Properties)详解 /* 存储属性(Stored Properties):类.结构体中,不能在枚举中 计算属性(Computed Properti ...

  3. 解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号

    在表格布局中经常会遇到因为表格内容长短的变化导致布局混乱的情况,这个时候我们可能会有为了布局稳定把单元格宽度写死的情况:但是我们设置了宽度却发现超出了宽度之后会自动变大,用css定义元素的overfl ...

  4. jquery对象和DOM对象的互相转换

    实际开发中,jq用的很多,jq对象不能调用原生js操作方法,DOM对象当然也不能调用jq的方法,有时候我们可以用到jq对象和jsDOM对象的相互转换. 在jq中,只需要调用[index]和get(in ...

  5. 在Ubuntu上安装Hadoop（单机模式）步骤

    1. 安装jdk:sudo apt-get install openjdk-6-jdk 2. 配置ssh:安装ssh:apt-get install openssh-server 为运行hadoop的 ...

  6. JSON 转javabean 利器

    别再对着json来手写javabean啦.这个工作完全不要脑子,而且耗时. 这里给大家提供三种方式: android studio版: 万能的插件:GsonFormat 如何安装? Preferenc ...

  7. Config文件

    这个是以前的笔记. web.config文件是一个XML文件,它的根结点是<configuration>. 1<appSettings>节点主要用来放asp.net应用程序的配 ...

  8. tomcat常见错误及解决方案

    一,tomcat启动时错误 1:The JAVA_HOME environment variable is not defined This environment variable is neede ...

  9. JS获取浏览器名和版本信息

    Navigator 对象包含有关浏览器的信息. Navigator 对象属性和方法: <html> <head> <title>JS完整获取浏览器信息</ti ...

  10. MySQL分表自增ID解决方案

    当我们对MySQL进行分表操作后,将不能依赖MySQL的自动增量来产生唯一ID了,因为数据已经分散到多个表中. 应尽量避免使用自增IP来做为主键,为数据库分表操作带来极大的不便. 在postgreSQ ...