咳咳，在网页出现滚动条的时候，许多网站会在右下角出现一个图标，点击可以回到页面顶部

本文就记录下js实现代码：

1.在html页面body添加dom元素

<img src="toTop.png" alt="" class="gotop" >

<div class="gotopdiv" style="display: none;"><span>返回顶部</span></div>

2.页面向下滚动时，出现该图标

//滚动时出现返回顶部

    $(window).scroll(function () {

        var top_scroll = $(document).scrollTop();

        if (top_scroll > 0) {

            $('img.gotop').css({ 'display': 'block', 'cursor': 'pointer' });

            $('.gotopdiv').css({ 'display': 'none' });

        } else {

            $('img.gotop,.gotopdiv').css({ 'display': 'none' })

        }

    })

3.点击该图标，回到页面顶端

   //点击返回顶部

    $(document).on('click','.gotopdiv,.gotop',function () {

        $(document).scrollTop(0);

        $('.gotop').hide()

        $('.gotopdiv').hide();

    })

4.加入该图标鼠标放置离开css效果

   $(document).on('mouseenter','.gotop',function () {

        var top_scroll = $(document).scrollTop();

        if (top_scroll > 0) {

            $(this).next().show();

            $(this).hide();

        }

    })

    $(document).on('mouseleave','.gotopdiv',function () {

        var top_scroll = $(document).scrollTop();

        if (top_scroll > 0) {

            $(this).prev().show()

            $(this).hide();

        }

    })

5 加入css。页面最终全部代码如下：

<!doctype html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

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

<style>

.gotop,.gotopdiv{

    position: fixed;

    bottom: 20px;

    width: 52px;

    display: none;

    height: 52px;

    right: 100px;

    z-index: 999;

    }

.gotopdiv{

    background: #60BF8B;

    font-weight: bold;

    text-align: center;

    cursor: pointer;

    width: 52px;

    height: 55px;

    color: #fff;

    font-size: 15px;

}

.gotopdiv span{display: inline-block;

padding: 10px;

position: relative;

}

</style>

</head>

<body>

<div style="position:absolute;width:600px;height:3000px;"></div>

<img src="toTop.png" alt="" class="gotop" >

<div class="gotopdiv" style="display: none;"><span>返回顶部</span></div>

</body>

<script>

    $(document).on('mouseenter','.gotop',function () {

        var top_scroll = $(document).scrollTop();

        if (top_scroll > 0) {

            $(this).next().show();

            $(this).hide();

        }

    })

    $(document).on('mouseleave','.gotopdiv',function () {

        var top_scroll = $(document).scrollTop();

        if (top_scroll > 0) {

            $(this).prev().show()

            $(this).hide();

        }

    })

    //点击返回顶部

    $(document).on('click','.gotopdiv,.gotop',function () {

        $(document).scrollTop(0);

        $('.gotop').hide()

        $('.gotopdiv').hide();

    })

    //滚动时出现返回顶部

    $(window).scroll(function () {

        var top_scroll = $(document).scrollTop();

        if (top_scroll > 0) {

            $('img.gotop').css({ 'display': 'block', 'cursor': 'pointer' });

            $('.gotopdiv').css({ 'display': 'none' });

        } else {

            $('img.gotop,.gotopdiv').css({ 'display': 'none' })

        }

    })

</script>

</html>

Demo效果和源码下载可以点击demo

js网页返回页面顶部的小方法的更多相关文章

  1. HTML5商城开发五 实现返回页面顶部

    本文内容主要是网上参考收集,介绍四种简单的返回页面顶部代码,可以使用简单的HTML锚标记,也可使用Javascript Scroll函数动态返回等等. 一.使用锚标记返回页面顶部 使用HTML锚标记最 ...

  2. 基于JS实现回到页面顶部的五种写法(从实现到增强)

    这篇文章主要介绍了基于JS实现回到页面顶部的五种写法(从实现到增强)的相关资料,本文介绍的非常详细,实用性也非常高,非常具有参考借鉴价值,需要的朋友可以参考下   写法 [1]锚点 使用锚点链接是一种 ...

  3. react-router(v4) 路由跳转后返回页面顶部问题

    遇到的问题 由A页面跳转到B页面,B页面停留在A页面的位置,没有返回到顶部. 问题分析 首先分析下出现此问题的原因: 在项目中使用的是 hashHistory,它是建立在 history 之上的,当路 ...

  4. 代码： 返回页面顶部 jquery

    jquery代码: 返回页面顶部 <script type="text/javascript" src="http://cdn.bootcss.com/jquery ...

  5. atitit. js 跨界面 页面 web cs 传值方法总结

    atitit. js 跨界面 页面 web cs 传值方法总结 #--需求 js #---两个方法:   直接传跟跟间接传递... 1.直接传跟new form(param)    web使用url方 ...

  6. 解决点击a标签返回页面顶部的问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. jquery实现返回页面顶部功能。

    <p id="back-to-top"> <span></span> </p> <script type="text ...

  8. （转）解决点击a标签返回页面顶部的问题

    本文转载至http://www.cnblogs.com/chenluomenggongzi/p/5950670.html 1 <!DOCTYPE html> 2 <html lang ...

  9. 原生态js，返回至顶部

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Java 内存区域和GC机制-java概念理解

    推荐几篇关于java内存介绍的文章 Java 内存区域和GC机制 http://www.cnblogs.com/hnrainll/archive/2013/11/06/3410042.html    ...

  2. css中的列表样式

    在网页设计中,我们经常将某些具有相似功能的标签放在同一组中,这时我们经常会用到列表标签(无序列表ul,有序列表ol),在列表标签中对列表样式的设计可以使我们的页面得到一定程度的美化. 在css中对列表 ...

  3. NetAnalyzer笔记 之 一. 开篇语

    [创建时间:2015-08-26 22:00:12] NetAnalyzer下载地址 第一次写技术相关的博客,不足之处还请担待并告知. 在开始之前,先简单介绍一下NetAnalyzer, NetAna ...

  4. C#工厂模式代码实例

    此处示例为一个简易计算器工厂模式的实现. 创建类库,名为CalcLib,我把计算功能全部放在这个类库中. 首先,创建一个抽象的计算器算法父类,如下: /// <summary> /// 计 ...

  5. python - 类成员修饰符

    在java,c#类的成员修饰符包括,公有.私有.程序集可用的.受保护的. 对于python来说,只有两个成员修饰符:公有成员,私有成员 成员修饰符是来修饰谁呢?当然是修饰成员了.那么python类的成 ...

  6. css Reset文件

    /* KISSY CSS Reset 理念:清除和重置是紧密不可分的 特色:1.适应中文 2.基于最新主流浏览器 维护:玉伯(lifesinger@gmail.com), 正淳(ragecarrier ...

  7. 英文长单词断行 word-break VS word-wrap

    你真的了解word-wrap和word-break的区别吗? 这两个东西是什么,我相信至今还有很多人搞不清,只会死记硬背的写一个word-wrap:break-word;word-break:brea ...

  8. 连接Oracle11g数据库时遇到无监听，网络适配器无法建立等问题的一些解决办法

    最近在用Java做一个学生成绩管理系统,打算用Oracle数据库.由于原先没接触过Oracle,所以安装完数据库后,连接数据库时遇到各种问题,网上搜索解决方案还是没有解决时,又重新安装了几次.终于在前 ...

  9. SignalR2.0开发实例之——群发消息

    一.前言 ASP .NET SignalR 是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信.什么是实时通信的Web呢?就是让客户端(Web页面)和服务器端可以互相 ...

  10. Jobs定时器 - Quartz

    Quartz是OpenSymphony开源组织在Job scheduling领域又一个开源项目,它可以与J2EE与J2SE应用程序相结合也可以单独使用.Quartz可以用来创建简单或为运行十个,百个, ...