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

下面放上  作者 的 掘金 地址  #掘金沸点# 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. VMware Workstation 官方正式版及激活密钥

    热门虚拟机软件VMware Workstation Pro现已更新至14.1.2,14.0主要更新了诸多客户机操作系统版本,此外全面兼容Wind10创建者更新.12.0之后属于大型更新,专门为Win1 ...

  2. [CSP-S模拟测试]:建设城市（city）（组合数学+容斥）

    题目传送门(内部题8) 输入格式 一行三个整数$n,m,k$. 输出格式 一行一个整数表示答案.对$998244353$取模. 样例 样例输入 3 7 3 样例输出 数据范围与提示 对于10%的数据, ...

  3. 获取响应状态Status信息、获取状态码Status Code

    一般服务器的响应状态有以下几种: 200 正常 400 未找到页面 403 拒绝 500 服务器错误 比如我们请求bootstrap中文网, 此时的状态码是200 OK表示正常,后面的from cac ...

  4. 九个console命令调试JS

    下面九个console命令,可以帮助我们更方便地调试 常用的console命令,最常用的事console.log() 1 //常用的console命令,其中最常用的console.log() 2 co ...

  5. 测开之路六十六：UI测试平台之处理逻辑和蓝图添加到程序入口

    from selenium import webdriverfrom common import get_case_idfrom common.mongo import Mongo class Log ...

  6. pycharm5.0.4简易使用说明

    前言:学习自动化,需要使用pycharm,以下是简易使用说明 1.注册破解 2.行号和背景色 3.打断点 1.注册破解 打开pycharm5.0.4,点击菜单栏的help->register.. ...

  7. 【SD系列】SAP SD模块-创建供应商主数据BAPI

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[SD系列]SAP SD模块-创建供应商主数据B ...

  8. java web项目启动加载顺序

    转载:https://www.cnblogs.com/writeLessDoMore/p/6935524.html web.xml加载过程(步骤):       1.启动WEB项目的时候,容器(如:T ...

  9. 5期-Metasploitable3专题课程

    metasploitable2基于ubantu的渗透演练环境.Rapid7官方长时间未更新,导致跟不上当前的节奏.metasploitable3出世. metasploitable2配合metaspl ...

  10. Maximum Subarray（最大连续子序列和）

    https://leetcode.com/problems/maximum-subarray/ 思路: 如果全为负值,那么取最大值 如果有非负值,那么我们依次计算到当前位置为止的最大值.假设有n个元素 ...