纯CSS实现返回顶部的功能

下面是 css 锚点跳转的一个例子：

 <style>#page-1 {width: 100%;height: 800px;background: red;font-size: 120px;text-align: center;}#page-2 {width: 100%;height: 800px;background: green;font-size: 120px;text-align: center;}#page-3 {width: 100%;height: 800px;background: blue;font-size: 120px;text-align: center;}
</style><body><div id="app"><nav><a href="#page-1">1</a><a href="#page-2">2</a><a href="#page-3">3</a></nav><div id="page-1">1</div><div id="page-2">2</div><div id="page-3">3</div></div>
</body>

实现的效果是点击对应的 a 标签可以跳转到对应的 div 内容。

但是没有实现平滑滚动，比如下面图片的那种效果。

‍‍

我们可以使用：scroll-behavior: smooth;

html {scroll-behavior: smooth;
}

MDN ：CSS 属性 scroll-behavior 为一个滚动框指定滚动行为，其他任何的滚动，例如那些由于用户行为而产生的滚动，不受这个属性的影响。在根元素中指定这个属性时，它反而适用于视窗。

通常我们使用 JS 实现返回顶部的功能：

document.querySelector("#js-scroll-to-top").addEventListener("click", (e) => {e.preventDefault();window.scroll({top: 0,left: 0,behavior: "smooth" // 指定滚动是否应该平滑进行，还是立即跳到指定位置。});
});

当点击“返回顶部”按钮时，用户会看到一些吸引眼球的内容，并且希望停止滚动，因此当他们再次操作鼠标滚轮进行了繁琐的滚动操作，就需要立即停止滚动。通过上面代码的 JS 是无法实现的，但是我们可以通过属性 scroll-behavior 配合锚点跳转来实现。

<style>html {scroll-behavior: smooth;}
</style><body><div id="app"><a href="#">回到顶部</a></div>
</body>

这样就可以了。

纯CSS实现返回顶部的功能相关推荐

纯CSS实现回到顶部的功能
如果你的网站有"返回顶部"按钮,并且已经实现平滑滚动. document.querySelector("#js-scroll-to-top").addEvent ...
纯css+html实现的分页器功能
分页器下载 github地址使用引入样式文件<link rel="stylesheet" href="./paginationself.css"&g ...
前端 css+js实现返回顶部功能
描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: 1 <div> 2 <button οnclick="returnTop()& ...
用jQuery实现返回页面顶部的功能
页面中有返回顶部的图标用起来使我们预览页面更方便,这个功能也是在网站中常见的功能,今天研究了一个简单的例子,用jQuery实现返回顶部的功能: css代码如下: *{ margin:0; paddin ...
前端开发——图标返回顶部功能
前端开发--点击图标,返回顶部功能功能实现:网页右下角的一键返回顶部图标方法:利用周期性定时器+鼠标滚动事件 html: <div id="retutop">< ...
【Android】Listview返回顶部，快速返回顶部的功能实现，详解代码。
2019独角兽企业重金招聘Python工程师标准>>> 作者:程序员小冰,GitHub主页:https://github.com/QQ986945193 新浪微博:http://we ...
jQuery实现一个优雅的返回顶部
前言最近在完成Freewind主题的V1.1版本的小升级,加了返回顶部的功能,索性就把实现整理成一篇博文发布出来供大家学习,效果如下: 主要功能在鼠标滚动超过一半屏幕高度时显示回顶部按钮,其它情况 ...
c语言实现图片轮播,纯css实现轮播图
轮播图的实现原理其实是比较简单的举个例子 main的宽度是100px div-main的宽度是500px 我们用js控制div-main往左或往右移动,这样就实现了轮播,简单把好了,先介绍个 cs ...
锚链接返回顶部，同页面、不同页面跳转
1 锚链接其实就是超链接的一种,一种特殊的超链接普通的超链接:<a href="路径"></a> 是跳转到不同的页面锚点:<a href=&qu ...

纯CSS实现返回顶部的功能

纯CSS实现返回顶部的功能相关推荐

最新文章

热门文章