<style>

        .divH {

            height: 1800px;

        }

        .divT {

            width: 50px;

            height: 50px;

            font-size: 18px;

            background-color: #2F4F4F;

            text-align: center;

            color: white;

            position: fixed;

            right: 18px;

            bottom: 18px;

        }

        .divT:hover{

            cursor: pointer;

        }

        .hide {

            display: none;

        }

    </style>

</head>

<body>

<div class="divH"></div>

<div class="divT hide" onclick="ReturnTop();"><strong>返回顶部</strong></div>

<script src="./jq/jquery-1.9.1.min.js"></script>

<script>

    window.onscroll = function () {

        var current = $(window).scrollTop();

        if (current > 180){

            $(".divT").removeClass("hide");

        }else {

            $(".divT").addClass("hide");

        }

    };

    function ReturnTop() {

        $(window).scrollTop(0);

    }

</script>

网页右下角有个返回顶部按钮，模仿淘宝？window.scrollTop()方法

js返回顶部小Demo的更多相关文章

  1. 添加“返回顶部”小图标按钮的JS(JavaScript)代码详解

    如何给自己的网站添加方便快捷的"返回顶部"小图标按钮呢?如下图: JS源代码: /** * JavaScript脚本实现回到页面顶部示例 * @param acceleration ...

  2. js返回顶部封装 简洁

    js返回顶部封装 简洁: 加入html页面body最后面即可. <script> a(); function a() { $(function() { if ($(".j-to- ...

  3. JS 带运动的返回顶部 小案例

    带运动的返回顶部:当滚动条在滚动的时候,滚动鼠标的滚轮,应该让滚动条停止滚动,清掉定时器.下面的方法b 就是清掉的方法 <!DOCTYPE html PUBLIC "-//W3C//D ...

  4. 原生js返回顶部（匀速、由快到慢）

    在项目中我们经常有需求要求页面滚动到一定位置时出现返回顶部按钮,点击即返回顶部. 方法一: 锚点,这是最简单的.(a标签的href属性等于一直要到达位置元素的id值) 方法二: js直接给页面根节点设 ...

  5. js返回顶部效果

    当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮 ...

  6. js返回顶部

    1. function scrollTop(){ $(},); } 2. $("#side-bar .gotop").click(function(){ $(},); //返回顶部 ...

  7. 原生JS返回顶部，带返回效果

    有些网站当滑到一定高度时右下角会有一个按钮,你只要一点就可以直接返回顶部了.那这个功能是怎么做到的呢.其实不算太难: 首先我们先在网页中创建一个按钮,上面写上返回顶部,把它的样式改成固定定位,之后想要 ...

  8. js 返回顶部

    <script> window.onload = function(){ var oTop = document.getElementById("to_top"); v ...

  9. Asp.Net Mvc+Angular.Js自测小Demo

    参考:http://www.cnblogs.com/eedc/p/6082052.html 一.引用anguler: 1.angular.js 2.angular-route.js 3.app.js ...

随机推荐

  1. myeclipse2014删除antlr-2.7.2.jar--解决struts和hibernate包冲突

    方式一: 要求眼疾手快,在workspace下的D:\myeclipse2014workspace\.metadata\.me_tcat7\webapps\工程名\WEB-INF\lib中将antlr ...

  2. 利用jmeter发起java请求调用shell脚本

    1.创建maven项目 在pom文件中加入依赖:     2.在路径src/main/java下创建类,如类名shellclass                     3.      创建jmet ...

  3. 网络编程和并发：1.简述 OSI 七层协议

    1. 概念 Open System Interconnection : 开放互联系统 2. 图示 注:图片来源:https://www.cnblogs.com/maybe2030/p/4781555. ...

  4. restful接口风格

    一.定义 REST全称是Representational State Transfer, 中文意思是表述性状态转移. REST指的是一组架构约束条件和原则,如果一个架构符合REST的约束条件和原则,我 ...

  5. Mac OS 10.15系统入门教程 系统语言输入法详解

    对于一些Mac新手来说呢还不知道偏好设置到底是什么?有什么用处?其实Mac系统内的几乎所有的系统相关的设置都会在系统偏好设置内出现. 切换系统语⾔在语言与地区设置中拖拽左侧的语言条目就可以切换系统的语 ...

  6. 查完数据库order_by后跟[:9]切片取前9位的值

  7. 改计算机名导致 Oracle因目标主机或对象不存在

    手贱修改了计算机名, 结果导致登陆oracle数据库报如下错误,一查资料,说是修改了计算机名导致的,需要进到oracle安装目录: \oracle\product\10.2.0\db_1\NETWOR ...

  8. 【Vim编辑器】基本命令

    前言 工作中免不了会使用到vim编辑文档,总会觉得不好上手,遂从网上找到一篇说明文档整理如下,共勉. 原文地址: https://www.cnblogs.com/shiyanlou/archive/2 ...

  9. POJ 3481 Double Queue (treap模板)

    Description The new founded Balkan Investment Group Bank (BIG-Bank) opened a new office in Bucharest ...

  10. 【HDU6662】Acesrc and Travel【树形DP】

    题目大意:给你一棵树,每个节点有一个权值,Alice和Bob进行博弈,起点由Alice确定,确定后交替选择下一个点,Alice目标是最终值尽可能大,Bob目标是尽可能小 题解:很明显是树形DP,那么考 ...