Question

您好我正在尝试向滑动导航添加过渡但徒劳无功。当我点击关于我们时，我立即带我到那个部分。相反，我想让它滑动和显示。同样适用于其他链接（团队，联系人）。看看下面的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>

Answer 1

我就是这样做的：

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

Here is the JSFiddle demo

使用materializecss进行滑动导航的过渡？

1 个答案: