css 平滑滚动:scroll-behavior: smooth；锚点使用

无需 JavaScript 即可实现平滑滚动，只需一行 CSS：scroll-behavior: smooth；

<template><div class="wrapper"><nav>Scroll to:<a href="#sectionA" class="link bg-red">A</a><a href="#sectionB" class="link bg-blue">B</a><a href="#sectionC" class="link bg-green">C</a></nav><div class="wrapper"><div id="sectionA" class="section bg-red">A</div><div id="sectionB" class="section bg-blue">B</div><div id="sectionC" class="section bg-green">C</div></div></div>
</templ

css 平滑滚动:scroll-behavior: smooth；锚点使用相关推荐

CSS scroll-behavior 属性 — 纯 CSS 平滑滚动
CSS 中的 scroll-behavior 属性是一个非常新的属性.定义要求 scroll-behavior(尤其是在选择锚链接时)具有平滑的过渡动画外观,而不是默认的.更刺眼的即时跳转. html ...
页面锚点链接点击平滑滚动
页面通过锚点跳转到指定位置添加平滑滚动效果,当点击锚点时可以平滑滚动到下一个锚点位置. 一点思路给需要跳转的节点添加相同的类名section,通过点击事件获取需要跳转的节点索引值$key,使用ani ...
[css] 使用overflow: scroll时不能平滑滚动怎样解决？
[css] 使用overflow: scroll时不能平滑滚动怎样解决? scroll-behavior: smooth; 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很 ...
[css] 遇到overflow: scroll不能平滑滚动怎么解决？
[css] 遇到overflow: scroll不能平滑滚动怎么解决? ipone 上解决方法是这样的, -webkit-overflow-scrolling: touch; 个人简介我是歌谣,欢迎 ...
网站锚点执行平滑滚动
查看原文:http://www.ibloger.net/article/402.html 相关阅读: 十条jquery代码片段助力Web开发效率提升:http://www.ibloger.net/ar ...
包含锚点平滑滚动效果/解决锚点链接碰到固定定位问题/导航选中背景变色/固顶/返回顶部效果全...
<script type="text/javascript">$(function() {//锚点平滑滚动效果 $('a[href*=#],area[href*=#]' ...
router锚点和html锚点,hash模式下Vue-router页面返回锚点（scroll behavior）实现
在普通页面中,点击浏览器的返回按钮,在返回到上一页时会处在上次浏览的位置.单页面应用中,由于始终是同一个页面, 因此需要自行实现页面返回时的锚点.Vue-router的Scroll Behavior可 ...
HTML锚点定位+平滑滚动
锚点定位属于是一种比较简单且使用频繁的技能,多用在目录和正文之间的跳转. html-代码 <div class="content"><h2 id="ti ...
vue中实现锚点定位以及平滑滚动到指定位置
这里主要是实现了一个简单的滚动触发锚点高亮,以及点击锚点触发滚动的功能如果是获取浏览器的滚动高度,各个浏览器有所差异,使用以下几种方式: Chrome: document.body.scrollTo ...

css 平滑滚动:scroll-behavior: smooth；锚点使用

css 平滑滚动:scroll-behavior: smooth；锚点使用相关推荐

最新文章

热门文章