带有 html # 标签的滚动动画答案

【问题标题】：scroll animation with html # tags带有 html # 标签的滚动动画
【发布时间】：2020-08-19 16:59:04
【问题描述】：

我目前正在尝试编写一个网站以动画化在 x 轴上移动以访问页面的不同部分（“标签内容”中的页面内容）。我有一个具有不同标题的导航栏，这是固定的，我希望用户单击每个标题并被带到该部分。我设法使用一些 JS 代码将用户带到所需的部分/div，但是，没有任何动画默认为选定的部分/div，只是突然出现在屏幕上。如何使用纯 JS 或 CSS 制作动画。我需要单击标题以将用户移动（移动）到该 div。我是网络开发新手。

这里是我的一些代码

HTML

<div class="main-info">
      <div class="nav-container">
         <div class="nav-bar">
            <ul>
               <li data-tab-target="#show" class="tab"><a href="#show">Show</a></li>
               <li data-tab-target="#about" class="tab"><a href="#about">About</a></li>
               <li data-tab-target="#lookbook" class="tab"><a href="#lookbook">Lookbook</a></li>
               <li data-tab-target="#process" class="tab"><a href="#process">Process</a></li>
            </ul>
         </div>
         <div class="info overlay">
            <div class="text">
               <a href="#">MA</a>
               <a href="#">Coming Soon</a>
               <a href="#">BA</a>
            </div>
            <a href="index.html" class="info-back">Back</a>
         </div>
      </div>
      <div class="tab-content">
         <div id="show" data-tab-content class="active">
            <p>VIDEO</p>
         </div>
         <div id="about" data-tab-content>
            <p>About</p>
         </div>
         <div id="lookbook" data-tab-content>
            <p>Lookbook</p>
         </div>
         <div id="process" data-tab-content>
            <p>Process</p>
         </div>
      </div>
   </div>

CSS

.main-info {
   background-color: transparent;
   height: 100vh;
   overflow: hidden;
}

.nav-container {
   position: fixed;

}

.nav-bar {
   width: 80vw;
   height: 10vh;
   left: 10vw;
   position: absolute;
   top: 5vh;

}

.nav-bar ul {

   text-transform: uppercase;
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   justify-content: space-around;
}

.tab a {
   font-family: Helvetica, sans-serif;
   font-weight: bold;
   font-size: 1rem;
   color: black;
   text-decoration: none;
}

.tab:hover {
   cursor: pointer;
   opacity: 0.6;
}

.tab.active {
   background-color: whitesmoke;
}



.info {
   width: 90vw;
   height: 10vh;
   /* border: 1px solid red; */
   left: 5vw;
   position: absolute;
   top: 80vh;
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
}

.info a {
   font-family: Helvetica, sans-serif;
   font-weight: bold;
   font-size: 1.1rem;
   color: black;
   text-decoration: none;
   border: 1px solid teal;
}

.text {

   width: 30%;
   display: flex;
   justify-content: space-between;
}

.tab-content {
   border: 1px solid teal;
   position: absolute;
   left: 0;
   top: 0;
   height: 100vh;
   z-index: -11;
   display: flex;
   flex: row nowrap;
   justify-content: flex-start;


}


[data-tab-content] {
   border: 1px solid blueviolet;
   background-color: violet;
   font-size: 3rem;
   color: blue;
   scroll-behavior: smooth;
   display: none;
width: 100vw;
   height: 100vh;

}

.active[data-tab-content] {
   display: block;
}

const tabs = document.querySelectorAll('[data-tab-target]');
const tabContents = document.querySelectorAll('[data-tab-content]')
// loop through the list to find the one tab mouse clicked
tabs.forEach(tab => {
   tab.addEventListener('click', () => {
      const target = document.querySelector(tab.dataset.tabTarget)

      tabContents.forEach(tabContent => {
         tabContent.classList.remove('active')
      })
      tabs.forEach(tab => {
         tab.classList.remove('active')
      });
      tab.classList.add('active')
      target.classList.add('active');

      
   });
});

【问题讨论】：

标签： javascript html css scroll css-animations

【解决方案1】：

你几乎明白了。不要在可滚动元素内的元素上设置scroll-behavior，而是将其放在具有滚动条的元素上。

.tab-content {
  scroll-behavior: smooth;
}

或者在最顶部的元素上让所有元素通过平滑的滚动动画移动。

:root {
  scroll-behavior: smooth;
}

【讨论】：