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

实现原理

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

2.添加必要的CSS样式

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

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

实现效果

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <script src="js/jquery.min.js"></script>
  11.     <style type="text/css">
  12.         .right-bar {
  13.             position: fixed;
  14.             display: none;
  15.             bottom: 100px;
  16.             right: 0;
  17.             text-align: center;
  18.         }
  20.         .right-bar a {
  21.             text-align: center;
  22.             text-decoration: none;
  23.             color: #757575;
  24.             display: block;
  25.             width: 64px;
  26.         }
  28.         .right-bar .bar-img {
  29.             position: relative;
  30.             width: 30px;
  31.             height: 30px;
  32.             padding-top: 20px;
  33.             margin: 0 0 0 17px;
  34.         }
  36.         .right-bar .bar-s .bar-img img {
  37.             width: 20px;
  38.             height: 20px;
  39.         }
  41.         .right-bar .bar-img .hover-img {
  42.             display: none;
  43.         }
  45.         .right-bar a:hover .hover-img {
  46.             display: block;
  47.         }
  49.         .right-bar a:hover .original-img {
  50.             display: none;
  51.         }
  53.         .content {
  54.             margin: 10px 100px;
  55.             text-indent: 2em;
  56.             text-align: justify;
  57.             line-height: 1.6em;
  58.         }
  59.     </style>
  60. </head>
  62. <body>
  63.     <p class="content">
  64.         此处填充任意大量文本
  65.     </p>
  66.     <div class="right-bar" id="go-to-top">
  67.         <a href="#top">
  68.             <div class="bar-img">
  69.                 <img class="original-img" src="data:image/totop.png">
  70.                 <img class="hover-img" src="data:image/totop_hover.png">
  71.             </div>
  72.         </a>
  73.     </div>
  74. </body>
  75. <script>
  76.     $(function () {
  77.         //当滚动到距顶部100像素以下时，出现箭头图标，否则消失
  78.         $(function () {
  79.             $(window).scroll(function () {
  80.                 if ($(window).scrollTop() > 100) {
  81.                     $("#go-to-top").fadeIn(1000);
  82.                 }
  83.                 else {
  84.                     $("#go-to-top").fadeOut(1000);
  85.                 }
  86.             });
  88.             //点击图标回到页面顶部
  89.             $("#go-to-top").click(function () {
  90.                 if ($('html').scrollTop()) {
  91.                     $('html').animate({ scrollTop: 0 }, 1000);
  92.                     return false;
  93.                 }
  94.                 $('body').animate({ scrollTop: 0 }, 1000);
  95.                 return false;
  96.             });
  97.         });
  98.     });
  99. </script>
  101. </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. 【面试题精讲】你知道MySQL中有哪些隔离级别吗

    有时博客内容会有变动,首发博客是最新的,其他博客地址可能未同步,请认准https://blog.zysicyj.top 首发博客地址 系列文章地址 脏读(Dirty Read)是指一个事务读取到了另一 ...

  2. Java进程 OOM的多种情况

    Java进程 OOM的多种情况 摘要 OOM 其实有多种: 第一类是JVM原生自发处理的, 这种也分为多种情况. 1. 堆区使用了比较多,并且大部分对象都还有引用, GC不出来可用内存, 这是要给对象 ...

  3. MYsql备份恢复简单过程

    1. 备份数据库 建完数据库更新完补丁之后进行数据库的备份操作. mysqldump -uroot --databases yourdatabase -p > /home/yourdatabas ...

  4. 【scikit-learn基础】--『回归模型评估』之准确率分析

    分类模型的评估和回归模型的评估侧重点不一样,回归模型一般针对连续型的数据,而分类模型一般针对的是离散的数据. 所以,评估分类模型时,评估指标与回归模型也很不一样,比如,分类模型的评估指标通常包括准确率 ...

  5. 从零开始配置 vim(4)——键盘映射的一些技巧

    通过前面的学习,我们已经知道了如何进行键盘映射,并且也知道了在任何场合应该使用非递归版本的映射.这篇再介绍一些使用关于快捷键映射的内容作为收尾 快速编辑 vimrc 文件 通过前面掌握的知识,相信各位 ...

  6. 【任务调度】Spring 的动态定时任务之 ScheduledTaskRegistrar（解决方案一）

    前言 ​ 在做SpringBoot项目的过程中,有时客户会提出按照指定时间执行一次业务的需求. ​ 如果客户需要改动业务的执行时间,即动态地调整定时任务的执行时间,那么可以采用SpringBoot自带 ...

  7. 深入浅出Java多线程（一）：进程与线程

    引言 大家好,我是你们的老伙计秀才. 在计算机系统的发展历程中,早期的计算机操作模式十分单一和低效.用户只能逐条输入指令,而计算机则按照接收指令的顺序逐一执行,一旦用户停止输入或进行思考,计算机会处于 ...

  8. 语义检索系统：基于Milvus 搭建召回系统抽取向量进行检索，加速索引

    语义检索系统:基于Milvus 搭建召回系统抽取向量进行检索,加速索引 目标:使用 Milvus 搭建召回系统,然后使用训练好的语义索引模型,抽取向量,插入到 Milvus 中,然后进行检索. 语义搜 ...

  9. Pdfium.Net.Free 一个免费的Pdfium的 .net包装器--PDF预览器框选

    项目地址: Pdfium.Net:https://github.com/1000374/Pdfium.Net PdfiumViewer:https://github.com/1000374/Pdfiu ...

  10. maven打包报错

    * 系统:macOS* 开发工具:Idea* 问题描述:在idea中执行mvn clean install时报No compiler is provided in this environment. ...