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

描述：

本文主要是讲，通过css+js实现网页中的【返回顶部】功能。

实现代码：

HTML：

1 <div>
2     <button οnclick="returnTop()" id="btnTop" title="返回顶部">返回顶部</button>
3 </div>

CSS：

 1 /* return top */
 2 #btnTop {
 3   display: none;
 4   position: fixed;
 5   bottom: 20px;
 6   right: 30px;
 7   z-index: 99;
 8   border: none;
 9   outline: none;
10   background-color: #89cff0;
11   color: white;
12   cursor: pointer;
13   padding: 15px;
14   border-radius: 10px;
15 }
16 #btnTop:hover {
17   background-color: #1E90FF;
18 }

JS：

 1 // 当网页向下滑动 20px 出现"返回顶部" 按钮
 2 window.onscroll = function() {
 3     scrollFunction()
 4 };
 5
 6 function scrollFunction() {
 7     console.log(121);
 8     if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
 9         document.getElementById("btnTop").style.display = "block";
10     } else {
11         document.getElementById("btnTop").style.display = "none";
12     }
13 }
14
15 // 点击按钮，返回顶部
16 function returnTop() {
17     document.body.scrollTop = 0;
18     document.documentElement.scrollTop = 0;
19 }

转载于:https://www.cnblogs.com/AnneHan/p/9713701.html

前端 css+js实现返回顶部功能相关推荐

js实现返回顶部功能的解决方案
<span style="font-size:14px"><p id="back-to-top"><a href="#t ...
前端开发——图标返回顶部功能
前端开发--点击图标,返回顶部功能功能实现:网页右下角的一键返回顶部图标方法:利用周期性定时器+鼠标滚动事件 html: <div id="retutop">< ...
js+JQuery实现返回顶部功能
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...
Bilibili返回顶部功能实现
Bilibili返回顶部功能实现文章目录 Bilibili返回顶部功能实现实现原理 1. 图 2. 实现代码最近学着开发网站,学校又是实训前端,也就多练练. 一开始是看水无月打牌注意到的,挺有趣 ...
HTML 返回顶部功能
HTML 最简单实现返回顶部功能 1.添加一个超链接,然后给其href="#top",则可以实现返回顶部可以和img标签结合使用实现功能. 2.给body标签设置id,添加超链接 ...
js原生实现过渡效果的返回顶部功能实例
问题描述适用范围:所有前端界面,返回顶部按钮兼容:ie 9 以上以下是实现功能的代码: <div style="position: fixed; width: 40px; hei ...
(008)前端css,js,Jquery,Servlet入门
摘要:本周的学习内容是前端的css,js,Jquery,Servlet的入门; 文章目录 1 CSS 1.1 CSS入门以及使用方式 1.2 CSS的选择器(重点) 1.3 css的样式属性 1.3. ...
jquery 实现返回顶部功能
1. html 中添加一个返回顶部的按钮,本例中采用了一个绝对定位的div,(position:fixed),背景色给了一定的透明度,并加入一个向上的箭头icon. 2. 绑定window 的scro ...
js 做返回顶部效果
涉及的知识点: font-awesome字体图标:使用的cdn. window.onload 窗口加载完成事件:如果js代码写在body标签之前,则所有的js都要写在window.onload的事件中 ...

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

前端 css+js实现返回顶部功能相关推荐

最新文章

热门文章