問題描述

我想在我的網(wǎng)站上制作動(dòng)畫效果，當(dāng)我們單擊菜單鏈接(例如 about-section)時(shí)，它會(huì)以視差樣式為該 div 設(shè)置動(dòng)畫.

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 插件，那么請(qǐng)告訴我，如果你也向我展示一個(gè)例子會(huì)更好.

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>

所以，根據(jù)我想要?jiǎng)赢嫷?strong>About-section的代碼，點(diǎn)擊鏈接說明About

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

推薦答案

希望你想要這個(gè).謝謝

// 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>

這篇關(guān)于單擊菜單鏈接從一個(gè) div 移動(dòng)到另一個(gè)的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！