单击菜单链接从一个 div 移动到另一个 [英] Moving from one div to another on click of a menu link

问题描述

我想在我的网站上制作动画效果，当我们单击菜单链接(例如 about-section)时，它会以视差样式为该 div 设置动画.

I want to make an animation effect on my website where, when we click on a menu link (say, about-section), it will animate to that div in a parallax style.

如果你知道任何可以在这方面帮助我的 jquery 插件，那么请告诉我，如果你也向我展示一个例子会更好.

So guys if you know any jquery plugin that can help me in this context, then please let me know, and it would be better if you demonstrate me a example of that as well.

查看代码获取帮助:

.Home-section {
  height: 500px;
  background: deepskyblue;
}
.About-section {
  height: 300px;
  background: deeppink;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<a href="#">Home</a>
<a href="#">About</a>

<div class="Home-section">
  <h1> Hello </h1>
</div>

<div class="About-section">
  <h1>Bye</h1>
</div>

所以，根据我想要动画到About-section的代码，点击链接说明About

So, According to the code i want to animate to About-section on click on the link stating About

推荐答案

希望你想要这个.谢谢

// handle links with @href started with '#' only
$(document).on('click', 'a[href^="#"]', function(e) {
    // target element id
    var id = $(this).attr('href');

    // target element
    var $id = $(id);
    if ($id.length === 0) {
        return;
    }

    // prevent standard hash navigation (avoid blinking in IE)
    e.preventDefault();

    // top position relative to the document
    var pos = $(id).offset().top - 10;

    // animated top scrolling
    $('body, html').animate({scrollTop: pos});
});

.Home-section {
  height:500px;
  background: deepskyblue;
  }

.About-section {
  height:300px;
  background:deeppink;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#home">Home</a>
<a href="#about">About</a>

<div class="Home-section" id="home"><h1> Hello </h1>
  </div>

<div class="About-section" id="about"><h1>Bye</h1>
  </div>

这篇关于单击菜单链接从一个 div 移动到另一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！