Question

我使用jquery在页面滚动方面遇到了一些问题。这里是代码的codepen.io链接。 http://codepen.io/faizanchaki/pen/KpOKrw/

HTML

<body>
<div class="container-fluid">  
  <header>    
      <nav class="navbar navbar-default">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Easeful</a>
        </div>
        <div>
          <ul class="nav navbar-nav navbar-right">
            <li><a id="home" href="#homeSection">Home</a></li>
            <li><a id="about" href="#aboutSection">About</a></li>
            <li><a id="portfolio" href="#portfolioSection">Portfolio</a></li>
            <li><a id="contact" href="#contactSection">Contact</a></li>
          </ul>
        </div>
      </nav>
  </header>
  <section id="homeSection">
    <h1 class="text-center">The Web.<span class="reimagined">Reimagined.</span></h1>
    <hr>
    <h2 class="text-center"><span style="font-family: 'Amaranth', sans-serif;">design and development. differently</span></h2>
    <!--  -->
 <!--   <div class="buttons">
      <button class="btn btn-primary"><i class="fa fa-github-square fa-lg"></i><strong>
        GitHub</strong></button>
      <button class="btn btn-primary"><i class="fa fa-facebook-official fa-lg"></i><strong>
        Facebook</strong></button>
      <button class="btn btn-primary"><i class="fa fa-linkedin-square fa-lg"></i><strong>
        LinkedIn</strong></button>
    </div> -->
    <div class="downnav">
      <button class="down"><i class="fa fa-angle-double-down fa-3x"></i>
</button>
    </div>
  </section>
</div>    
  <section id="aboutSection">
    <h2 class="reimagined about">Inspired from our lovely country, <span style="color: #388E3C;">Pakistan</span>, at Easeful, we yearn for lasting relationships with our clients by delivering amazingly creative and quality work.<br><span style="padding-left: 430px;">We Specialize in:</span></h2>    
  </section>
  <section id="portfolioSection">
    <h2>Portfolio Section</h2>
  </section>
  <section id="contactSection">
    <h2>Contact Section</h2>
  </section>
  <footer>
    <h1>Footer</h1>
  </footer>
</body>

的Javascript

$(document).ready(function(){  
  setBindings();  
});

function setBindings() {
  $("li a").click(function(e){
    e.preventDefault();
    var sectionId = e.currentTarget.id + "Section";
    $("html body").animate({scrollToTop: $("#" + sectionId).top},1000)
  });
}

我查看了页面滚动教程： http://www.youtube.com/watch?v=gZudXREGviM。本教程中的演示效果很好，我在javascript中有完全相同的代码，但我的工作并不起作用。

Answer 1

你需要为html制作动画而不是身体。
您需要使用scrollTop，而不是scrollToTop。它是一个名为“scrollTop”的属性
top属性位于.position()或.offset()，而不是直接位于对象中。
您应指定要设置scrollTop的单位。（不一定，应该）

    function setBindings() {
      $("li a").click(function(e){
        e.preventDefault();
        var sectionId = e.currentTarget.id + "Section";
        $("html").animate({
          scrollTop: $("#" + sectionId).position().top +"px"
        },1000)
      });
    }

使用jquery滚动页面无法正常工作

1 个答案: