中午在【掘金】潜水摸鱼，看到这一个沸点，个人已经撸出特效；

下面放上  作者 的 掘金 地址  #掘金沸点# https://juejin.im/pin/5d649eaaf265da19752533db

效果图：

HTML：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>scroll-behavior让你的页面导航更加丝滑</title>

     <style>

     div#app{width:100%;height:auto;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #ccc}

     nav{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:center;align-items:center;align-self:center;justify-content:center;border:1px solid #ccc}

     nav a{display:inline-block;flex:1;font-size:18px;text-align:center}

     section.scroll-container{display:block;width:100%;height:400px;overflow-y:hidden;scroll-behavior:smooth}

     div.scroll-page{display:flex;align-items:center;justify-content:center;height:100%;font-size:20px;color:#fff}

     div#page-1{background:saddlebrown;}

     div#page-2{background:salmon;}

     div#page-3{background:seagreen;}

     </style>

 </head>

 <body>

     <div id="app">

         <nav>

             <a href="#page-1">page-1</a>

             <a href="#page-2">page-2</a>

             <a href="#page-3">page-3</a>

         </nav>

         <section class="scroll-container">

             <div class="scroll-page" id="page-1">1</div>

             <div class="scroll-page" id="page-2">2</div>

             <div class="scroll-page" id="page-3">3</div>

         </section>

     </div>

 </body>

 </html>

一分钟小知识：scroll-behavior 让你的页面导航滚动更丝滑~的更多相关文章

  1. 12个你未必知道的CSS小知识

    虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过. 1.CSS的color属性并非只能用于文本显示 对于CSS ...

  2. ssh的两个小知识

    ssh的两个小知识 1. 在ssh客户端启动远程服务器的图形界面程序. 如果你试图在ssh客户端运行远程服务器的一个图形界面程序,比如说执行firefox,此时可能会提示,can not connec ...

  3. Linux小知识：sudo su和su的区别

    Linux小知识:sudo su和su的区别 本文是学习笔记,视频地址:https://www.bilibili.com/video/av62836363 su是申请切换root用户,需要申请root ...

  4. [C#.NET 拾遗补漏]02：数组的几个小知识

    阅读本文大概需要 1.5 分钟. 数组本身相对来说比较简单,能想到的可写的东西不多.但还是有一些知识点值得总结和知晓一  下.有的知识点,知不知道不重要,工作中用的时候搜索一下就可以了,毕竟实现一个功 ...

  5. 蓝牙Bluetooth技术小知识

    蓝牙Bluetooth技术以及广泛的应用于各种设备,并将继续在物联网IoT领域担任重要角色.下面搜集整理了一些关于蓝牙技术的小知识,以备参考. 蓝牙Bluetooth技术始创于1994年,其名字来源于 ...

  6. HTML+CSS中的一些小知识

    今天分享一些HTML.CSS的小知识,希望能够对大家有所帮助! 1.解决网页乱码的问题:最重要的是要保证各个环节的字符编码一致! (1)编辑器的编辑环境的字符集(默认字符集):Crtl+U 常见的编码 ...

  7. iOS APP开发的小知识(分享）

          亿合科技小编发现从2007年第一款智能手机横空出世,由此开启了人们的移动智能时代.我们从一开始对APP的陌生,到现在的爱不释手,可见APP开发的出现对我们的生活改变有多巨大.而iOS AP ...

  8. Unix系统小知识（转）

    Unix操作系统的小知识 2.VI添加行号/翻页/清屏 .在对话模式时(即输完Esc再输入: ),输入“:set number”可以将编辑的文本加上行号.跟玩俄罗斯方块一样方便的上下左右移动箭头的快捷 ...

  9. salesforce 零基础开发入门学习（十）IDE便捷小知识

    在这里介绍两个IDE的便捷开发的小知识. 一) 本地调试 由于salesforce代码只能提交以后才能调试,所以很多时候调试代码很麻烦.新版增加了一个特性:即可以在本地调试相关的代码或者查看相关代码运 ...

随机推荐

  1. [CSP-S模拟测试96]题解

    以后不能再借没改完题的理由不写题解了…… A.求和 求$\sum \sum i+j-1$ 柿子就不化了吧……这年头pj都不考这么弱智的公式化简了…… 坑点1:模数不定,可能没有2的逆元,那么只要先把乘 ...

  2. apache主要配置详解

    1. # Deny access to the entirety of your server's filesystem. You must # explicitly permit access to ...

  3. Spring Boot学习第一部分（Spring 4.x）第一章（Spring 基础）

    1.spring概述 1.1.spring的简史 第一阶段:XML配置spring 1.x时代, 第二阶段:注解配置spring 2.x时代, @Controller @Service @Compon ...

  4. POI 单元格类型CellType

    1.单元格类型 单元格的内容决定了单元格的类型,POI中定义的7种单元格类型: 2.示例 cell_0.setCellType(CellType.STRING);//字符串 日期数据对应的单元格类型是 ...

  5. day02-Javascript之document.write()方法

    转行学开发,代码100天.——2018-03-18 document.write()方法作为Javascript的常用输出方式,可输出字符串,标签元素,变量等. document.write(&quo ...

  6. [LeetCode] 287. Find the Duplicate Number（Floyd判圈算法）

    传送门 Description Given an array nums containing n + 1 integers where each integer is between 1 and n  ...

  7. HTML设置<table>的<td>横跨3列

    第一步:html中 <table> <tr> <td>列一</td> <td>列二</td> <td>列三</ ...

  8. inclusion_tag 基本使用

    inclusion_tag的用途 inclusion_tag可以实现从后台往前端传递绑定数据的样式,一般用来动态显示模板页面中显示固定格式的数据. inclusion_tag的用法 step1: 编写 ...

  9. 查询SQLSERVER执行过的SQL记录（历史查询记录）(转)

    原文链接:https://www.cnblogs.com/icycore/p/10493237.html 有的时候,需要知道近段时间SQLSERVER执行了什么语句,可以用下面的方法: SELECT ...

  10. Cookie/Session/Local Storage/IndexedDB

    本文主要总结客户端/浏览器端数据存储的技术. 在客户端或者浏览器端存储,可以快速的访问页面,当前主要有Cookie,Session,Local Storage,IndexedDB四种(WebSQL呗废 ...