上一篇: JQuery从文本框中删除焦点下一篇:jquery – DataTables呈现自定义...

jquery – 单击菜单链接从一个div移动到另一个div

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – 单击菜单链接从一个div移动到另一个div，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

嘿伙计们,我想在我的网站上制作动画效果,当我们点击菜单链接(比如说,关于部分)时,它会以视差风格动画到该div.

那么大家,如果你知道任何jquery 插件可以帮助我在这种情况下,那么请让我知道,如果你也向我展示一个例子会更好.

请参阅代码以获取帮助：

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

因此,根据我想要动画到关于部分的代码,点击链接说明关于

解决方法

希望你想要这个.谢谢

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