最近在设计自己的博客，前端页面在内容很多的时候往下拖动会有滚动条。通常我们都需要一个返回顶部的功能来实现快速来到网页顶部。当然实现方式不止一种，这里我采用的最实用的一种。使用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. 【转帖】nginx变量使用方法详解-8

    https://www.diewufeiyang.com/post/582.html 与 $arg_XXX 类似,我们在 (二) 中提到过的内建变量 $cookie_XXX 变量也会在名为 XXX 的 ...

  2. nginx 进行目录浏览的简单配置

    1. 公司网络安全不让用vsftpd的匿名网络访问了, 没办法 只能够使用 nginx 通过http协议来处理. 2. 最简单的办法就是另外开一个nginx进程简单设置一下nginx的配置文件 wor ...

  3. CentOS7 RPM离线安装PG12的办法

    1. 先需要下载相应的rpm包 地址 https://pkgs.org/search/?q=postgresql12 一般至少要下载如下四个包 postgresql12-12.3-1PGDG.rhel ...

  4. docker 推送镜像到harbor

    服务器A的镜像要推送到已安装harbor的服务器B 1.修改服务器A的/etc/docker/daemon.json文件 其中,http://211.131.241.221:8888为你要推送的服务器 ...

  5. PostgreSQL中的B-TREE索引

    分析了解pgsql中的索引 前言 索引 B-tree B-Tree和B+Tree的区别: pgsql中B-Tree 实现 如果该节点不是最右节点 如果该节点是最右节点 参考 分析了解pgsql中的索引 ...

  6. 突破性的多语言代码大模型基CodeShell：引领AI编程新时代

    突破性的多语言代码大模型基CodeShell:北京大学与四川天府银行联合打造,引领AI编程新时代 1.CodeShell简介 CodeShell是北京大学知识计算实验室联合四川天府银行AI团队研发的多 ...

  7. VLE基于预训练文本和图像编码器的图像-文本多模态理解模型：支持视觉问答、图文匹配、图片分类、常识推理等

    VLE基于预训练文本和图像编码器的图像-文本多模态理解模型:支持视觉问答.图文匹配.图片分类.常识推理等 多模态预训练模型通过在多种模态的大规模数据上的预训练,可以综合利用来自不同模态的信息,执行各种 ...

  8. 在数据增强、蒸馏剪枝下ERNIE3.0分类模型性能提升

    在数据增强.蒸馏剪枝下ERNIE3.0模型性能提升 项目链接: https://aistudio.baidu.com/aistudio/projectdetail/4436131?contributi ...

  9. C/C++ BeaEngine 反汇编引擎

    反汇编引擎有很多,这个引擎没有Dll,是纯静态链接库,适合r3-r0环境,你可以将其编译为DLL文件,驱动强制注入到游戏进程中,让其快速反汇编,读取出反汇编代码并保存为txt文本,本地分析. 地址:h ...

  10. GoodSync(最好的文件同步软件)

    GoodSync是一款使用创新的最好的文件同步软件,可以在你的台式机.笔记本.USB外置驱动器等设备直接进行数据文件同步软件. GoodSync将高度稳定的可靠性和极其简单的易用性完美结合起来,可以实 ...