<!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. 钉钉客户端JS-API权限签名算法.NET版

    前段时间写了一篇博文<钉钉如何进行PC端开发>,在里面并未解决本地生成签名的问题,需要到官网进行生成,由于钉钉门票等认证信息会超期,因此,必须能本地用代码自动更新相关参数信息,来换取签名. ...

  2. PyInstaller 安装方法 及简单的编译exe (python3)

    安装PyInstaller //地址 https://github.com/pyinstaller/pyinstaller/tree/python3 //上面的链接已经失效,新的(20160809更) ...

  3. EWS API 2.0读取日历信息-读取内容注意事项

    采用模拟账号的方式读取日历信息,注意下日历的内容读取(Body)读取.代码如下:(采用 EWS API 2.0版本) 1.读取内容前必须设置如下属性:否则会提示:You must load or as ...

  4. R语言学习

    1.清屏 Ctrl + L 2.退出 q() 3.设置工作空间 getwd() setwd('D:\\Program Files\\RStudio\\workspace') 4.显档当前工作目录下的文 ...

  5. 【Leafletjs】1.创建一个地图

    code: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <l ...

  6. yii redies 不同的工程缓存key的问题

    参考这篇文章 基本配置操作: yii main.php中: return array( ... 'components'=>array( 'redis_cache' => array ( ...

  7. App 即时通讯 SDK

    1.网易云信 http://netease.im/ 2.环信 http://www.easemob.com/customer/im 3.融云 http://www.rongcloud.cn/ 4.极光 ...

  8. 【Android自定义控件】支持多层嵌套RadioButton的RadioGroup

    前言 非常喜欢用RadioButton+RadioGroup做Tabs,能自动处理选中等效果,但是自带的RadioGroup不支持嵌套RadioButton(从源码可看出仅仅是判断子控件是不是Radi ...

  9. OC中runtime的使用

    一.runtime简介* RunTime简称运行时.OC就是“运行时机制”,也就是在运行时候的一些机制,其中最主要的是消息机制.* 对于C语言,“函数的调用在编译的时候会决定调用哪个函数”.* 对于O ...

  10. FTP远程文件传输命令

    使用ftp命令进行远程文件传输 ftp命令是标准的文件传输协议的用户接口.ftp是在TCP/IP网络上的计算机之间传输文件的简单有效的方法.它允许用户传输ASCII文件和二进制文件. 在ftp会话过程 ...