Question

我的视差页面顶部有一些链接，我希望它们在您点击它们时动画滚动到页面中的所需位置。目前链接只是跳转到我页面上的地方，没有动画。

视差滚动工作正常，这是我的.js文件中的第一段代码，可以在页面底部查看。

这是我的链接div

<div id="main-nav"> <!-- top locked scroll bar -->
        <p>
        <a class="click" href="#home">Your Links</a> |
        <a href="#me">More Links</a> |
        <a href="#projects">Another Link</a> |
        <a href="#hire">Really</a> 
       <!-- <button onclick="changeColor()">Yin/Yang</button> -->
        </p>
    </div>

它跳转到页面的一个例子（但我想让它动画化）

section class="box slide slide-1">
    <div class="container">
        <div id="home"></div>
      <h1>Main Title</h1>
    </div>
  </section>

这是我在页面上使用的所有javascript

(function(){

var parallax = document.querySelectorAll(".slide"),
  speed = 0.5;

window.onscroll = function(){
[].slice.call(parallax).forEach(function(p,i){

  var windowYOffset = window.pageYOffset,
      theBackgrounPos = "0 " + (windowYOffset * speed) + "px";

  p.style.backgroundPosition = theBackgrounPos;

 });
 };
 })();

 /************ CODE USED TO MAKE THE ANIMATION SCROLL TO THAT IS NOT WORKING*////
 $(document).ready(function (){
       $(".click").click(function (){
               $('html, body').animate({
                   scrollTop: $("#home").offset().top
               }, 2000);
       });
 });

即使我的最佳路线重新开始，也会非常感谢任何帮助。

Answer 1

我刚刚在我正在处理的网站上运行以下内容。

JavaScript的：

$(document).ready(function () {
    $("a[href^='#']").click(function(event) {
        var target = $($(this).attr("href"));
        event.preventDefault();
        $("html, body").animate({
            scrollTop: target.offset().top
        }, 500);
    });    
});

HTML：

<nav id="nav-menu">
    <a href="#home"><p>home</p></a>
    <a href="#services"><p>services</p></a>
    <a href="#work"><p>work</p></a>
    <a href="#about"><p>about</p></a>
    <a href="#contact"><p>contact</p></a>
</nav>

然后使用“id = home”，“id = services”等对页面进行分解。

动画滚动到视差站点内的div

1 个答案: