个人中心
gpt4 book ai didi

jquery - 滚动到页面顶部，然后使用 jQuery 隐藏元素

转载 作者：行者123 更新时间：2023-11-28 00:32:16 26 4
gpt4 key购买 nike

我有一个 div home，通过单击 show 显示或隐藏。然后我有第二个 div main 和一些文本。在页面的末尾，我有另一个 div back，单击它会隐藏 main div。我正在尝试实现该功能，以便在单击 back 时，页面应滚动回页面顶部，然后隐藏 main div。我有下面的代码，但它首先隐藏了 div 并向上滚动。我希望发生相反的情况 - 滚动到顶部然后隐藏。

$(document).ready(function(){
    $('#show').click(function() {
      $('.home').toggle();
    });
    $('.back').click(function() {
    $([document.documentElement, document.body]).animate({
            scrollTop: $("#show").offset().top
     });
     $('.main').hide();
       $('.home').show();
});
});
.container {
  background: yellow;

}

.home {
  position: relative;
  background: red;
  height: 100vh;
  width: 100vw;
  display: block;
  z-index: 11;
}

.hide {
  display: none;
}

.enter {
  color: black;
}

.main {
  background: green;
  height: auto;
  width: 100vw;
  display: block;
  position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>

  <div id="show">Click to Show/ Hide div</div>
  <div class="home">
    <ol>
      <li>India</li>
      <li>US</li>
      <li>UK</li>
      <li>Australia</li>
    </ol>
  </div>

  <div class="main">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nullam vehicula ipsum a arcu cursus vitae congue. Vitae congue eu consequat ac felis donec et odio pellentesque. Placerat vestibulum
    lectus mauris ultrices eros in cursus turpis massa. Ligula ullamcorper malesuada proin libero nunc consequat. Consectetur lorem donec massa sapien. Nullam ac tortor vitae purus faucibus ornare suspendisse sed. Vel risus commodo viverra maecenas accumsan
    lacus vel facilisis. Amet commodo nulla facilisi nullam vehicula ipsum a arcu cursus. Aliquam ut porttitor leo a diam sollicitudin tempor id. Urna id volutpat lacus laoreet non curabitur. Augue mauris augue neque gravida in fermentum et sollicitudin
    ac. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Interdum consectetur libero id faucibus nisl tincidunt eget nullam. roin libero nunc consequat. Consectetur lorem donec massa sapien. Nullam ac tortor vitae purus faucibus ornare
    suspendisse sed. Vel risus commodo viverra maecenas accumsan lacus vel facilisis. Amet commodo nulla facilisi nullam vehicula ipsum a arcu cursus. Aliquam ut porttitor leo a diam sollicitudin tempor id. Urna id volutpat lacus laoreet non curabitur.
    Augue mauris augue neque gravida in fermentum et sollicitudin ac. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Interdum consectetur libero id faucibus nisl tincidunt eget nullam.


  </div>

  <div class="back">
    Back to Top
  </div>

</body>

最佳答案

要在动画后隐藏/显示内容，将该逻辑放在回调参数中:

$([document.documentElement, document.body]).animate({
  scrollTop: $("#show").offset().top
}, function() {
  $('.main').hide();
  $('.home').show();
});

$(document).ready(function() {
  $('#show').click(function() {
    $('.home').toggle();
  });

  $('.back').click(function() {
    $([document.documentElement, document.body]).animate({
      scrollTop: $("#show").offset().top
    }, 5000, function() {
      $('.main').hide();
      $('.home').show();
    });
  });
});
.container {
  background: yellow;
}

.home {
  position: relative;
  background: red;
  height: 100vh;
  width: 100vw;
  display: block;
  z-index: 11;
}

.hide {
  display: none;
}

.enter {
  color: black;
}

.main {
  background: green;
  height: auto;
  width: 100vw;
  display: block;
  position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="show">Click to Show/ Hide div</div>
<div class="home">
  <ol>
    <li>India</li>
    <li>US</li>
    <li>UK</li>
    <li>Australia</li>
  </ol>
</div>
<div class="main">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nullam vehicula ipsum a arcu cursus vitae congue. Vitae congue eu consequat ac felis donec et odio pellentesque. Placerat vestibulum
  lectus mauris ultrices eros in cursus turpis massa. Ligula ullamcorper malesuada proin libero nunc consequat. Consectetur lorem donec massa sapien. Nullam ac tortor vitae purus faucibus ornare suspendisse sed. Vel risus commodo viverra maecenas accumsan
  lacus vel facilisis. Amet commodo nulla facilisi nullam vehicula ipsum a arcu cursus. Aliquam ut porttitor leo a diam sollicitudin tempor id. Urna id volutpat lacus laoreet non curabitur. Augue mauris augue neque gravida in fermentum et sollicitudin
  ac. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Interdum consectetur libero id faucibus nisl tincidunt eget nullam. roin libero nunc consequat. Consectetur lorem donec massa sapien. Nullam ac tortor vitae purus faucibus ornare
  suspendisse sed. Vel risus commodo viverra maecenas accumsan lacus vel facilisis. Amet commodo nulla facilisi nullam vehicula ipsum a arcu cursus. Aliquam ut porttitor leo a diam sollicitudin tempor id. Urna id volutpat lacus laoreet non curabitur.
  Augue mauris augue neque gravida in fermentum et sollicitudin ac. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Interdum consectetur libero id faucibus nisl tincidunt eget nullam.
</div>
<div class="back">
  Back to Top
</div>

关于jquery - 滚动到页面顶部，然后使用 jQuery 隐藏元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58202257/

26 4 0
文章推荐： c++ - 使用目标文件和源文件进行编译的区别
文章推荐： c++ - 按字母顺序将对象插入 vector C++
文章推荐： javascript - 为什么 .obj 对定向光没有反应？ [三.js]
文章推荐： c++ - 如何在类中重新分配指针数组？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com