【避坑指“难”】页面Top置顶（返回顶部）小图标实现逻辑

窗口大小

在不同浏览器中确定浏览器窗口大小没有想象中那么容易。所有现代浏览器都支持 4 个属性：

innerWidth
innerHeight
outerWidth
outerHeight

outerWidth 和 outerHeight 返回浏览器窗口自身的大小（不管是在最外层 window 上使用，还是在窗格中使用）。

innerWidth和 innerHeight 返回浏览器窗口中页面视口的大小（不包含浏览器边框和工具栏）。

document.documentElement.clientWidth 和 document.documentElement.clientHeight返回页面视口的宽度和高度

什么时候显示置顶Icon

当滚动条位置-页面视口高度 > 0时

const [showIcon, setShowIcon] = useState(false);useEffect(() => {window.addEventListener("scroll", scroll);
}, [])useEffect(() => {return ()=> {window.removeEventListener("scroll", scroll);}
}, [])const scrollToTop = () => {document.body.scrollTop = document.documentElement.scrollTop = 0;};const scroll = e => {let scroll = document.documentElement.scrollTop;let screenHeight = document.documentElement.clientHeight;if (scroll - screenHeight > 0)setShowIcon(true);elsesetShowIcon(false);};

{showIcon ?<div className="float-item" onClick={scrollToTop}><img className="img-one" src={require('../../../assets/image/icon-top.png')}/><img className="img-two" src={require('../../../assets/image/icon-top-w.png')}/></div>: ""
}

【避坑指“难”】页面Top置顶（返回顶部）小图标实现逻辑相关推荐

【避坑指“难”】微信小程序自定义相机：自定义取景框、本地保存照片可分享、获取GPS定位
CustomCamera 功能介绍与展示小程序取景框内拍照实时显示当前时间显示当前经纬度显示当前街道信息可本地保存照片代码实现 1.拍照功能拍摄照片:CameraContext.ta ...
html 浮动窗口置顶,jQuery简单实现页面元素置顶时悬浮效果示例
本文实例讲述了jQuery简单实现页面元素置顶时悬浮效果的方法.分享给大家供大家参考,具体如下: 一.JS Code: $.fn.smartFloat = function () { var posi ...
vue 页面不置顶问题(页面内操作、页面跳转后) - 集合篇
文章目录 vue 页面内切换dom,页面跳转后都不置顶? 一.页面内操作: 1.1 代码如下: 二.页面之间跳转: 2.1 代码截图 · 说明: 2.2 增加代码 · 示下: 三.拓展 · (直接置 ...
美团·北极星开发对接避坑指北（Java）
背景:公司做美团洗涤上门业务,本来好好的,后面美团要求接入美团·北极星订单预约接口,才能正常使用,没办法只能去接接口了,但是遇到了无数的坑,所以就有了这篇<美团·北极星开发对接避坑指北>, ...
LaTeX中表格默认在页面中置顶怎么取消？
LaTeX中表格默认在页面中置顶怎么取消? 表格.图都默认在这一页置顶,已尝试过以下方法均不行: 1.[htbp]调节方式,无论如何调节没有任何变化 2.\usepackage{float} + [H ...
网页缓慢置顶回到顶部 html、css、js
题目: 网页缓慢置顶回到顶部( html.css.js)...鼠标点击回到顶部的盒子后,网页可先快后缓慢最终回到最初顶部.使用js的定时器实现. 问题描述: 鼠标点击回到顶部的盒子后,网页可先快后缓慢 ...
vue解决跳转时新页面没有置顶
V ue页面跳转后当前位置不在顶部的解决办法(几种办法) 1,在main.js中添加如下代码: // 跳转后返回顶部router.afterEach((to,from,next) => {win ...
html5导航栏悬浮置顶,（微信小程序）导航栏悬浮吸顶以及置顶的设置
前言最近在做小程序的项目,遇到一些问题放在这里,一来作为自己经验收集册,收集自己的项目遇到的问题或者做的东西:二来将自己遇到的问题经验分享出来前景提要吸顶功能页面设置在静态的首页,作为一个首页展 ...
包含锚点平滑滚动效果/解决锚点链接碰到固定定位问题/导航选中背景变色/固顶/返回顶部效果全...
<script type="text/javascript">$(function() {//锚点平滑滚动效果 $('a[href*=#],area[href*=#]' ...

【避坑指“难”】页面Top置顶（返回顶部）小图标实现逻辑

窗口大小

什么时候显示置顶Icon

【避坑指“难”】页面Top置顶（返回顶部）小图标实现逻辑相关推荐

最新文章

热门文章