<!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. Java IO 装饰者模式

    装饰模式(Decorator) 装饰模式又名包装(Wrapper)模式. 装饰模式以对客户端透明的方式扩展对象的功能,是继承关系的一个替代方案. 装饰模式通过创建一个包装对象,也就是装饰,来包裹真实的 ...

  2. Microsoft SQL Server Compact 4.0&&ADO.NET Entity Framework 4.1&&MVC3

    最近重新查看微软MvcMusicStore-v3.0的源代码,发现忽略了很多重要的东西,特别是数据访问那一部分. 首先Microsoft SQL Server Compact 4.0 详细的介绍和下载 ...

  3. Node.js+Express配置入门

    Node.js是一个Javascript运行环境(runtime).实际上它是对Google V8引擎进行了封装.V8引 擎执行Javascript的速度非常快,性能非常好.Node.js对一些特殊用 ...

  4. 详解Javascript 函数声明和函数表达式的区别

    Javascript Function无处不在,而且功能强大!通过Javascript函数可以让JS具有面向对象的一些特征,实现封装.继承等,也可以让代码得到复用.但事物都有两面性,Javascrip ...

  5. 关于处理addGiftmoneyAction接口报错问题的总结

    昨天UniUser中AddGiftmoneyAction接口在被调用时抛出异常,曾哥让我来解决这个问题,虽然最后查出是路径问题,但是由于解决问题 的思路不够清晰,导致浪费了大量的时间和精力,也没有给出 ...

  6. 【web前端面试题整理06】成都第一弹，邂逅聚美优品

    前言 上周四回了成都,休息了一下下,工作问题还是需要解决的,于是今天去面试了一下,现在面试回来了,我感觉还是可以整理一下心得. 这个面试题整理系列是为了以后前端方面的兄弟面试时候可以得到一点点帮助,因 ...

  7. 微软正开发Office Reader和Office Lens

    据熟知微软Office计划的消息人士透露,微软目前正开发新Windows 8风格的Office应用程序,该应用程序代号被微软称为Office Reader,而为Windows Phone开发的应用程序 ...

  8. 为Windows Azure Web站点添加MIME类型解决文件下载失败的问题

    这几天在倒腾Autodesk 360 Viewer,前面的文章也介绍过了,这将是一个全新的在线模型浏览工具.我做了个实验,把A360Viewer放在一个web 站点,然后发布到Windows Azur ...

  9. Gradle常用命令

    使用cmd进入Android studio项目的根目录就可以执行一些gradle相关命令 gradle -v 查看版本 (如果你是第一次执行会去下载Gradle,这个过程如果不FQ非常慢) gradl ...

  10. 生成uuid

    function guid(){ if (function_exists('com_create_guid')){ return com_create_guid(); }else{ mt_srand( ...