使用html＃标签滚动动画

问题描述

我目前正在尝试对网站进行编码，以使其动画在x轴上移动以访问页面的不同部分（“ tab-content”中的页面内容）。我有一个导航栏，它具有不同的标题，此标题是固定的，我希望用户单击每个标题并转到该部分。我设法用一些JS代码将用户带到所需的部分/格，但是，突然出现在屏幕上的默认部分/格没有动画。如何使用纯JS或CSS制作动画。我需要单击标题才能将用户移动（移动）到该div。我是Web开发人员的新手。

这是我的一些代码

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;
}

JS

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');

      
   });
});

解决方法

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

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

或者在最上方的元素上，使所有元素以平滑的滚动动画移动。

:root {
  scroll-behavior: smooth;
}