css通过a标签锚点+scroll-behavior滚动行为，丝滑实现“返回顶部”

最新推荐文章于 2024-06-13 21:19:05 发布
最新推荐文章于 2024-06-13 21:19:05 发布
阅读量1.5k 收藏 4
点赞数 4
分类专栏： 前端开发 文章标签： 前端 css html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38499671/article/details/109183258
版权

记得有人制作“返回顶部”这个功能时，总是喜欢用js做，我之前问过他为什么不用a标签做，他说：“a标签做的过于僵硬，没有js实现的效果丝滑顺畅”…，css真的不能制作丝滑的滚动效果吗？
在这里插入图片描述

当然不！CSS可以实现，只是你的认知不足，你可能都没有见过scroll-behavior这个标签。

scroll-behavior为一个滚动框指定滚动行为。 默认auto，立即滚动；smooth ，平稳丝滑的滚动；
在这里插入图片描述

html{scroll-behavior:smooth}
在不考虑ie兼容的情况下，完全可以用a标签锚点跳转+scroll-behavior:smooth实现这个效果！
在这里插入图片描述
51qux博客原文：https://course.51qux.com/1293.html

兔子敲代码
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
单击锚点链接时平滑滚动
xfxf996的博客
05-07 528
I have a couple of hyperlinks on my page. 我的页面上有几个超链接。 A FAQ that users will read when they visit m
js导航栏A标签锚点跳转
10-16
js左侧导航栏A标签锚点跳转，流动效果。非常值得学习。
HTML的a标签如何做返回顶部的功能
最新发布
ggq53219的博客
06-13 428
在HTML中，<a>标签通常用于创建超链接。要实现返回顶部的功能，你可以使用<a>标签结合JavaScript的scrollTo()方法（尽管在大多数情况下，我们更常用或），或者利用CSS的:target选择器配合一个空的ID锚点。
js 回到顶部丝滑效果
qq_31182399的博客
04-15 302
//监听页面滚动 window.addEventListener('scroll', changeScrollTop); //控制隐藏显示 if(document.documentElement.scrollTop > 400){ setshowTop(true) }else { setshowTop(false) } //回到顶部-动画 const obj = document.getElementsByTagName('html')[.
锚点滑动效果
ouyangbo100的专栏
05-08 591
$(document).ready(function(){ $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') || location.hostname == this.hostname
锚点应用(点击a标签滚动到指定的位置)
幸福有多远
04-12 2868
css #main&gt;div{ height: 400px; border:3px solid red; }html &lt;ul&gt; &lt;li&gt;&lt;a href="#aa"&gt;文章1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#bb"&gt
使a标签锚点跳转变为滚动跳转
qq_57413019的博客
09-03 384
使a标签锚点跳转变为滚动跳转
微信小程序-scroll-view滚动到指定位置（类似锚点）
03-29
本文作者：莫兰迪不会没有瓶子，来自原文地址 先来说一下官网例子吧 ...scroll-view竖向滚动必须设置scroll-y="true" style="height: 200rpx;" 必须.. style="height: 200rpx;" 必须为200rpx/200px 不能用百分号 js中
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
10-16
今天小编就为大家分享一篇vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
10-15
综上所述，微信小程序中的 `scroll-view` 组件通过结合事件绑定、数据绑定以及 CSS 样式，可以实现复杂的滚动交互，如左侧导航栏点餐功能。在这个示例中，用户点击导航栏分类，页面会自动滚动到对应的菜品列表，同时...
微信小程序 scroll-view 实现锚点跳转功能
10-15
主要介绍了微信小程序 scroll-view 实现锚点跳转功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
div+css A标签锚点功能.zip
11-17
总结，"div+css A标签锚点功能.zip"中的内容可能涵盖了如何使用 `div` 布局，`CSS` 修饰锚点，以及如何通过 JavaScript（可能包括 jQuery）增强锚点的功能，实现平滑滚动、动态加载等效果。这个压缩包对于学习前端...
A锚点实现，滚动页面内容改变tab选项
08-03 555
Css: ul{margin:0;padding:0;list-style:none;} a{ text-decoration: none; outline:none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transpar...
css3丝滑回到锚点位置
m0_61450899的博客
04-09 128
在css中加入该样式可以让浏览器回到锚点位置的动画变得丝滑不再僵硬！中加入过渡效果，上码！js点击事件回到顶部展示。并可以配合js进行使用。
a 锚点跳转滑动效果
boKeB1
08-05 1424
<a href="#my">我是跳转到div</a> <div id="my"></div> <script> $(function(){ //锚点跳转滑动效果 $('a[href*=#],area[href*=#]').click(function() { console.log(this.pat...
【vue+a链接动态锚点】监听滚动事件，实现动态锚点。左侧菜单列表，右侧内容区，点击快速定位+滑动到对应内容区高亮对应菜单项
花椒和蕊的博客
04-21 3789
这个效果花了两天的时间，终于实现 ，可以点击快速定位，也可以滑动左侧对应高亮 主要用到a标签的动态锚点，scrollIntoView方法，监听元素的滚动事件 1、a标签的动态锚点 实现方式以我理解的如下： 通过a标签的href属性与其他元素（如div）的id相对应，给a链接加点击事件，让点击的id等于容器的id，实现“id”定位,因为用了div包裹a标签 并且for循环，所以好像不用写href属性，有key就行了。 因为项目里大量使用此功能，为了方便，所以把左侧菜单列表进行了封装，其实也可以都写在父组件中
css scroll-behavior属性制作回到顶部
Web_ZAHNG3的博客
01-01 455
css回到顶部
vue 全屏_基于 Vue 丝滑全屏滚动组件MV-Full-Page
weixin_39734020的博客
12-12 1847
今天给大家分享一个超不错的Vue滚屏切换组件MVFullPage。mv-full-page 一款基于vue2.x构建的屏幕滑动组件。兼容移动端、PC端(鼠标滚轮滑动)，支持局部页面动画。特性PC端鼠标滚轮切换(水平/垂直)移动端触摸滑动(水平/垂直)页面切换动画重置自定义animate动画支持 ts支持组件内局部滚动支持自定义容器定位及容器大小兼容 IE、Chrome、Firefox安装$ npm...
给锚点a标签添加滑动效果
热门推荐
chance_66的博客
11-28 1万+
给锚点a标签添加滑动效果
css a标签定位锚点动画
02-01
CSS的a标签可以用来定位到页面上的锚点，并且还可以通过CSS属性来实现锚点定位时的动画效果。首先，我们可以通过给a标签的属性href添加#加上锚点名称来实现点击链接定位到指定的锚点位置。例如，我们可以在页面上的某个地方添加一个锚点，比如<div id="section1">，然后在导航栏的链接中添加href="#section1"来实现点击链接定位到该锚点处。 接着，我们可以利用CSS的scroll-behavior属性来实现锚点定位时的平滑滚动动画效果。通过设置a标签的样式，将scroll-behavior属性设为smooth，当点击链接的时候页面会平滑滚动到对应的锚点位置，而不是立即跳转过去。这样就能给用户带来更流畅的体验。 除了scroll-behavior属性之外，我们还可以利用CSS3的transition属性来实现更加个性化的锚点定位动画效果。通过设置a标签的样式，添加transition属性来实现过渡效果，比如改变颜色、背景色或者大小，从而让用户在点击链接时感觉到更加生动和有趣的页面切换效果。 总之，通过CSS的a标签、scroll-behavior属性和transition属性，我们可以实现锚点定位时的平滑滚动和动画效果，提升用户体验，使页面看起来更加流畅和吸引人。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值