Question

我想基本上创建一个完整的页面背景图像，一旦用户点击（任何地方），向下滚动到剩余的内容，然后隐藏自己。最初，没有滚动条，然后一旦点击＆gt; scrolltop发生，并且隐藏了背景div，则通过删除溢出隐藏类来显示滚动条。

我的问题是，当我单独使用scrolltop时，页面会直接滚动到我选择的元素，但是当我然后添加javascript代码来隐藏最初的介绍div（用户点击的那个），页面远远超过ScrollTop点。

如果有人有任何想法，我在这里包含了我的JSFiddle链接。

Answer 1

display: none正在将.intro的高度更改为0，因此您有两种选择：

更改.hidden的CSS以使用visibility: hidden

或

更改.animate的第一个参数，以考虑.intro的高度：$(".one").offset().top - $(".intro").height()

我还建议将removeClass和addClass调用放入回调函数中，而不是使用.delay()：

选项2 +回调使用的示例：

$(document).ready(function() {
  $(".intro").click(function() {
    $('html, body').animate({
      scrollTop: $(".one").offset().top - $(".intro").height()
    }, 700, function() {
      $("body").removeClass("bleh");
      $(".intro").addClass("hidden");
    });
  });
});

Answer 2

这有用吗？添加hidden课程后，您可以滚动到one div的顶部。

$(function(){
  $(".intro").on("click", function(){
    $("body").removeClass("bleh");
    $("html, body").animate({
      scrollTop : $(".one").offset().top 
    }, function(){

      $(".intro").addClass("hidden")
      $(document).scrollTop(0)

    })
  })
})

html, body{
  height: 100%;
}
body{
  margin: 0;
}
.bleh{
  overflow: hidden;
}
.hidden{
  display: none;

}
.intro{
  background: red;
  text-align: center;
  padding: 20px;
  background-position: center;
  background-size: cover;
  height: 100%; 

}


.one {
  width: 100%;
  background-color: black;
  display: block;
  height: 400px;
}

.two {
  width: 100%;
  background-color: blue;
  display: block;
  height: 400px;
}
.three {
  width: 100%;
  background-color: black;
  display: block;
  height: 400px;
}

.four {
  width: 100%;
  background-color: blue;
  display: block;
  height: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<body class="bleh">
    <div class="intro">
        <h1>Click anywhere to scroll down to main content</h1>
    </div>
    
    <div class="one">
        
    </div>
    
    <div class="two">
        
    </div>
        <div class="three">
        
    </div>
        <div class="four">
        
    </div>
</body>

JQuery ScrollTop滚动太远了

2 个答案: