使用materializecss进行滑动导航的转换？答案

【问题标题】：Transitions for sliding navigation using materializecss?使用materializecss进行滑动导航的转换？
【发布时间】：2016-02-02 08:13:14
【问题描述】：

您好，我正在尝试向滑动导航添加过渡，但徒劳无功。当我点击关于我们时，我会立即将我带到那部分。相反，我希望它滑动并显示。其他链接也一样（团队，联系人）。看看下面的jsfiddle。 https://jsfiddle.net/samson421/90zku52x/2/

  <div class="navbar-fixed">
   <nav>
    <div class="nav-wrapper light-blue darken-3" >
      <a href="#" class="brand-logo right-align" >&nbsp;&nbsp;hello.com</a>
       <ul class="left-align">
        <li><a href="#about" >About Us</a></li>
        <li><a href="#team">Our Team</a></li>
        <li><a href="#contact">Contact Us</a></li>
        <li><a href="v_index.php">Login</a></li>
       </ul>       
      </div>
    </nav>
  </div>

  <section id="about">
    <div class="container">
     <h4 style="text-decoration:underline;text-align:center">About Us</h4><br><br>
      <div class="quot">
        <h5 style="color:#446CB3;padding-top:30px">Vision</h5>
        <p id="vision">some text</p>
        <h5 style="color:#446CB3">Mission</h5>
        <p id="vision">some text</p>
        <h5 style="color:#446CB3">Objectives</h5>
        <p id="vision">some text</p><br><br><br>
     </div>
  </div>
</section><br><br><br><br>

   <section id="team">
    <div class="container">
      <div class="center-align">
       <h4 style="text-decoration:underline">Core Team</h4><br><br>
         <div class="row">
           <div class="col s4">
             <img class="circle responsive-img" src="index2/img/works/1.png" class="circle" height="200" width="200">
                <h5>one </h5>
                <p style="text-align:justify">
              some text
                </p>
                 <div class="row">
                  <a href="v_details.php" class="waves-effect waves-light btn-large">Details</a>
                 </div>
           </div>

          <div class="col s4">
                 <img class="circle responsive-img" src="index2/img/works/2.png" class="circle" height="200" width="200">
                 <h5>two</h5>
                 <p style="text-align:justify">
              some text
                </p>

                <div class="row">
                  <a href="v_details.php" class="waves-effect waves-light btn-large">Details</a>
                </div>
          </div> 

          <div class="col s4">
                <img class="circle responsive-img" src="index2/img/works/3.png" class="circle" height="200" width="200">
                <h5>three</h5>
                <p style="text-align:justify">
             some text

              <div class="row">
                <a href="v_details.php" class="waves-effect waves-light btn-large">Details</a>
              </div>

          </div> 

        </div>

<div class="center align">
   <h4 style="text-decoration:underline">Contact Us</h4>

      <p>Let us know if you are interested in knowing more.</p>

      <table>


          <tr>
            <td id="no">+4917655434285 </td>
          </tr>



          <tr>
            <td id="email">Email:<a href=">info@hello.com</a></td>
          </tr>

      </table>

</div>

【问题讨论】：

标签： javascript html css materialize

【解决方案1】：

我会这样做：

$("li a").click(function(e) {
  e.preventDefault();
    $("html, body").animate({scrollTop: $($(this).attr("href")).offset().top}, 400);
});

Here is the JSFiddle demo

【讨论】：

嘿，我看到它的工作，但我不明白为什么联系页面滚动这么快？它真的很快。如何设置相等的时间？
增加滚动所需的时间。如您所见，在我的回答中，我将其设置为400 毫秒。增加它，它应该对你有用 :) 如果你有任何进一步的问题，请告诉我 :)
嘿，谢谢伙计。知道如何在滚动时突出显示活动标签吗？
该功能通常称为 scrollspy。 This could help you 因为您使用的是 matrilizecss :)
是的，没错。谢谢你。但我看到它使用的是垂直导航列表，但我有一个水平列表。