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

问题描述

我想在我的网站上制作动画效果，当我们点击一​​个菜单链接（比如关于部分）时，它会以视差风格为该div制作动画。

所以，如果你知道任何可以帮助我的jquery插件，那么请让我知道，如果你向我展示一个例子，那会更好。

b
$ b

查看帮助代码：

.Home-section {height：500px;背景：deepskyblue;}。关于部分{height：300px;背景：deeppink;}

< script src =https ：//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js>< / script>< a href =＃>主页< / a>< a href =＃>关于< / a>< div class =Home-section> < H1> Hello< / h1>< / div>< div class =关于部分> < h1> Bye< / h1>< / div>

$ b

因此，根据我要为关于部分生成动画的代码，点击关于

解决方案

希望你想要这个。谢谢

  //处理带@href的链接仅以'＃'开始$（document）.on（'click'，'a [href ^ =＃]'，function（e）{//目标元素id var id = $（this）.attr（'href'）; //目标元素var $ id = $（id）; if（$ id .length === 0）{return;} //防止标准哈希导航（避免在IE中闪烁）e.preventDefault（）; //相对于文档的顶端位置var pos = $（id）.offset（）。 -  10; //动画顶部滚动$（'body，html'）。animate（{scrollTop：pos}）;}）;  

  .Home-section {height：500px;背景：deepskyblue; }。关于部分{height：300px;背景：深粉红; }  

 < script src =https：// ajax .googleapis.com / ajax / libs / jquery / 2.1.1 / jquery.min.js>< / script>< a href =＃home>主页< / a>< a href = #about>关于< / a>< div class =Home-sectionid =home>< h1>你好< / h1> < / div>< div class =关于部分id =about>< h1> Bye< / h1> < / div>  

Hey guys i want a make 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.

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.

See the code for help:

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

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

解决方案

Hope you want this. Thanks

// 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移动到另一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！