最近在设计自己的博客，前端页面在内容很多的时候往下拖动会有滚动条。通常我们都需要一个返回顶部的功能来实现快速来到网页顶部。当然实现方式不止一种，这里我采用的最实用的一种。使用CSS+Jquery方式 代码量相对较少，容易理解。

实现原理

1.我们需要再DOM中添加自己的DIV，里面包含一个a标签，a标签里面包含两个img标签用于存放返回顶部的图片。

2.添加必要的CSS样式

3.然后通过JS代码实现当网页滚动100px以下，返回顶部的图标开始逐渐出现。相反则图标逐渐消失。这里面有一个渐变的效果。

4.当点击a标签时，JS实现延迟滚动网页到顶部。

实现效果

代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

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

    <style type="text/css">

        .right-bar {

            position: fixed;

            display: none;

            bottom: 100px;

            right: 0;

            text-align: center;

        }

        .right-bar a {

            text-align: center;

            text-decoration: none;

            color: #757575;

            display: block;

            width: 64px;

        }

        .right-bar .bar-img {

            position: relative;

            width: 30px;

            height: 30px;

            padding-top: 20px;

            margin: 0 0 0 17px;

        }

        .right-bar .bar-s .bar-img img {

            width: 20px;

            height: 20px;

        }

        .right-bar .bar-img .hover-img {

            display: none;

        }

        .right-bar a:hover .hover-img {

            display: block;

        }

        .right-bar a:hover .original-img {

            display: none;

        }

        .content {

            margin: 10px 100px;

            text-indent: 2em;

            text-align: justify;

            line-height: 1.6em;

        }

    </style>

</head>

<body>

    <p class="content">

        此处填充任意大量文本

    </p>

    <div class="right-bar" id="go-to-top">

        <a href="#top">

            <div class="bar-img">

                <img class="original-img" src="data:image/totop.png">

                <img class="hover-img" src="data:image/totop_hover.png">

            </div>

        </a>

    </div>

</body>

<script>

    $(function () {

        //当滚动到距顶部100像素以下时，出现箭头图标，否则消失

        $(function () {

            $(window).scroll(function () {

                if ($(window).scrollTop() > 100) {

                    $("#go-to-top").fadeIn(1000);

                }

                else {

                    $("#go-to-top").fadeOut(1000);

                }

            });

            //点击图标回到页面顶部

            $("#go-to-top").click(function () {

                if ($('html').scrollTop()) {

                    $('html').animate({ scrollTop: 0 }, 1000);

                    return false;

                }

                $('body').animate({ scrollTop: 0 }, 1000);

                return false;

            });

        });

    });

</script>

</html>

CSS加JS实现网页返回顶部功能的更多相关文章

  1. javascript实现网页返回顶部功能

    在浏览网页时,我们一般是拖动滚动条向下滑动,浏览下面的内容,当页面超过单页时,右下角会出现一个回到顶部的图标,有些网站这个图标一直显示在右下角的. 有些网站使用锚链接来实现页面内容的跳转,但这种效果的 ...

  2. js+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a  ...

  3. 手机端网页返回顶部js代码

    <!DOCTYPE html>  <html>  <head>  <meta http-equiv="Content-Type" cont ...

  4. 前端 css+js实现返回顶部功能

    描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: <div> <button onclick="returnTop()" ...

  5. js实现返回顶部功能的解决方案

    很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...

  6. js网页返回顶部和楼层跳跃的实现原理

    这是简单的效果图. (实现楼层间的跳跃,主要依靠的是 window.scrollTo(x,y)方法 ,将浏览器的可见区域移动到指定的x,y坐标上.)   说楼层跳跃前,先温习下,一般网页在高度较大时, ...

  7. 网页返回顶部之animate方法

    点击返回顶部按钮,页面滑动形式回到顶部! HTML代码: <div id="ctop">回到<br>顶部</div> CSS代码: #ctop{ ...

  8. 转载：jQuery实现返回顶部功能

    转自:http://blog.csdn.net/itmyhome1990/article/details/25340705 整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图   ...

  9. 使用Javascript实现返回顶部功能。

    为了提高网站的浏览体验及友好度,相信大部分网站需要一个返回顶部的按钮,如果使用传统的a标记,再做一个div加上链接的话,非常麻烦,不仅每个页面都需要添加,而且不能实现非常智能的效果及简化维护时间. 下 ...

  10. jQuery实现返回顶部功能

    整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图               第一种实现 一.JSP或HTML(主体结构) 在body中添加 <body id=" ...

随机推荐

  1. [转帖]配置 Windows XP 正常上网（TLS HTTPS），连接到 NAS

    https://zhuanlan.zhihu.com/p/208685816# 学习一下. 知乎用户8kqKq9 等 45 人赞同了该文章 Windows XP 是经典的.高效的.可靠的.性能良好的操 ...

  2. 银河麒麟上面 ntopng的安装与使用

    银河麒麟上面 ntopng的安装与使用 背景 一直想用Grafana监控网络流量 但是断断续续尝试了一周的时间都没有搞定. 发现这一块已经进入了瓶颈. 比较无奈的情况下回到了原来的iftop/iptr ...

  3. [转帖]《Linux性能优化实战》笔记（24）—— 动态追踪 DTrace

    使用 perf 对系统内核线程进行分析时,内核线程依然还在正常运行中,所以这种方法也被称为动态追踪技术.动态追踪技术通过探针机制来采集内核或者应用程序的运行信息,从而可以不用修改内核和应用程序的代码就 ...

  4. [转帖]一口气看完45个寄存器，CPU核心技术大揭秘

    https://www.cnblogs.com/xuanyuan/p/13850548.html 序言 前段时间,我连续写了十来篇CPU底层系列技术故事文章,有不少读者私信我让我写一下CPU的寄存器. ...

  5. [转帖]【JVM】字节码执行引擎

    引入 class文件就是字节码文件,是由虚拟机执行的文件.也就是java语言和C & C++语言的区别就是,整个编译执行过程多了一个虚拟机这一步.这个在 类文件结构 中已经解释.上一节讲了虚拟 ...

  6. Redis labs 的安装

    Install and setup This guide shows how to install Redis Enterprise Software, which includes several ...

  7. 某环境私有云 rpm 包安装失败总结

    1. 最近公司同事说一个项目搭建环境时 rpm 安装mysql数据库会报错 错误图片主要如下: 第一个错误提示是 提示 /etc/host.conf line 2: bad command `nosp ...

  8. 手工创建一个带sticky模块的nginx镜像 并且实现容器化负载均衡的方法

    最近想进行容器化运行的nginx反向代理负载均衡服务. 找了一下 dockerhub上面的 nginx 发现里面不包含 sticky模块. 会报错为: nginx: [emerg] unknown d ...

  9. 两千字讲明白java中instanceof关键字的使用！

    写在开头 在过往的内容中,我们讲了不少的Java关键字,比如final.static.this.super等等,Java中的关键字非常之多,下图是整理的关键字集合 而我们今天要学习的就是其中的inst ...

  10. TienChin 引入 MyBatisPlus

    在父工程当中添加版本号,统一管理: <mybatis-plus.version>3.5.1</mybatis-plus.version> 在父工程当中添加 MyBatisPlu ...