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

下面放上  作者 的 掘金 地址  #掘金沸点# 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. 2018-2019-2 20175307 实验四《Android程序设计》实验报告

    任务一 实验要求和内容: Android Stuidio的安装测试: 参考<Java和Android开发学习指南(第二版)(EPUBIT,Java for Android 2nd)>第二十 ...

  2. MySQL部分索引

    部分索引 char/varchar2太长,全部做索引的话,效率低,浪费存储空间 select avg(length(username)) from 索引统计: show index from tabl ...

  3. 16/7/27-PHP环境配置(php5.5.3.7+mysql5.7.12+Apache2.4)

    非常感谢http://www.cnblogs.com/jicheng1014/archive/2012/01/26/2329531.html 配置php环境问题 php.ini 路径 "\& ...

  4. Vue事件总线

    一 项目结构 二 main.js import Vue from "vue"; import App from "./App.vue"; import Tool ...

  5. c++虚函数与重载

    class base{ public: virtual void f(int n){ cout << "base"<<endl; } }; class De ...

  6. POJ - 3176 Cow Bowling 动态规划

    动态规划:多阶段决策问题,每步求解的问题是后面阶段问题求解的子问题,每步决策将依赖于以前步骤的决策结果.(可以用于组合优化问题) 优化原则:一个最优决策序列的任何子序列本身一定是相当于子序列初始和结束 ...

  7. 12.定义Lock类,用于锁定数据.三步走,锁的优缺点

    #在threading模块当中定义了一个Lock类,可以方便的使用锁定: # #1.创建锁 # mutex = threading.Lock() # # #2.锁定 ''' mutex.acquire ...

  8. python3 -tensorflow-dataset 之map函数 lambda隐函数的应用

    ###隐函数lanbda及map函数的应用实例 ''' lambda 参数1,参数2,参数3,...:表达式 ''' f = lambda x,y :x+y print(f(1,2)) ###输出3 ...

  9. 微信小程序列表时间戳转换

    第一步先写js   随便命名为times.js function toDate(number){     var n=number * 1000;     var date = new Date(n) ...

  10. 希希敬敬对Alpha阶段测试报告

    已经完成的功能:1 GUI界面效果已经达到了设计要求,经过review代码完成度较好,GUI.PY代码可以使用,完成了“贴吧名字关键字与URL关联”. 2 能够实现"贴吧名字关键字与URL关 ...