全屏 jQuery 中的 ScrollTop答案

【问题标题】：ScrollTop in FullScreen jQuery全屏 jQuery 中的 ScrollTop
【发布时间】：2018-09-05 00:12:33
【问题描述】：

当浏览器处于普通模式时，用户可以点击一个按钮并滚动到页面顶部的一个div：

$('html,body').animate({scrollTop:$('.backTop').offset().top}, 150);

https://jsfiddle.net/f6xr93b7/

但是让浏览器处于全屏模式，不起作用

【问题讨论】：

如果它处于全屏模式，您希望它不滚动到顶部吗？您的尝试有什么问题？
不，如果是普通屏幕或全屏，我希望您滚动到顶部。
这种方式只能在普通主题下工作，全屏没有任何反应。
你不需要检查它是否是全屏的。无论您处于哪种模式，jQuery 都会找到元素的位置。它不能在全屏模式下工作，因为您确实有一个条件（如果），如果它不是全屏模式，则向上滚动。摆脱 var 和 if，只保留 .animate 行..
这不是问题，我已经删除了if 进行测试，它仍然无法正常工作

标签： javascript jquery

【解决方案1】：

我认为这就是您要寻找的。首先，您需要为要滚动的部分设置一个超链接。就我而言，它是#top。然后是一些用于平滑滚动的 jquery 代码。

运行 sippet，转到页面底部（到蓝色部分）。点击右下角的白框。

// Add smooth scrolling to all links
$("a").on('click', function(event) {

  // Make sure this.hash has a value before overriding default behavior
  if (this.hash !== "") {
    // Prevent default anchor click behavior
    event.preventDefault();

    // Store hash
    var hash = this.hash;

    // Using jQuery's animate() method to add smooth page scroll
    // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
    $('html, body').animate({
      scrollTop: $(hash).offset().top
    }, 800, function() {

      // Add hash (#) to URL when done scrolling (default click behavior)
      window.location.hash = hash;
    });
  } // End if
});

#top {
  height: 300px;
  width: 100%;
  background: red;
}

#second {
  height: 300px;
  width: 100%;
  background: blue;
}

.icon {
  height: 30px;
  width: 30px;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top">
</div>
<div id="second">
</div>
<a href="#top">
  <div class="icon">
  </div>
</a>

【讨论】：

@sNniffer 你说的全屏是什么意思。如果该部分在全屏中可见，您将不会直接进入该部分。先生，您能详细说明您的问题吗？
很简单，全屏模式我的朋友jsfiddle.net/sirfizx/2jkt3z5e ，只需在全屏模式下单击一个按钮，屏幕就会被定向到div，和你说的一样，但是是全屏模式。帖子的标题就是这个
所以你在这里使用 iframe？你能用你的 HTML 代码更新问题吗
我不确定你的问题。当我检查您的代码时，我可以看到您的全屏 html 在 iframe 中。所以问题不只是关于 ScrollTop，而是关于 iframe 内的 ScrollTop。我经历了几个例子，我无法想出答案。这对我来说似乎有点新。所以需要时间。如果我找到任何解决方案，我会告诉你的。
你可以在这里得到一些想法：stackoverflow.com/questions/1852518/…

【解决方案2】：

已解决：

只需使用：

$('html,body').animate({scrollTop:$('.backTop').offset().top}, 150);

分配给正文的滚动，但应该分配给全屏 div 的滚动，得到：

（首先我们需要将滚动条放在开头才能正确地采取偏移量）

$('#leitor').scrollTop(0); $('#leitor').animate({ scrollTop: $(".backTop").offset().top }, 150);

【讨论】：