Question

我正在尝试设置一个将视口底部滚动到元素顶部的click事件，这基本上会使该元素对用户不可见。

例如，我在页面上有一个id为footer的元素，所以我想做以下事情：

if ($('#footer').visible(true)) {
    // #footer is visible, scroll the bottom of the browser viewport to the top of the #footer element.
}

知道如何做到这一点？感谢

Answer 1

您可以尝试这样的事情：

$("#yourButtton").click(function() {
   if($("#footer").is(":visible")) {
      $("html, body").animate({
           scrollTop: $("#footer").offset().top
      }, 500);
   }
});

我希望这是你所期待的。感谢。

Answer 2

您需要使用animate()滚动到元素。 scrollTop属性强制浏览器滚动到Y位置。

$("button").click(function() {
   if ($("#footer").is(":visible")) {
      var topPos = $("#footer").offset().top;
      var winHeight = $(window).height();

      $("html, body").animate({
           scrollTop: topPos - winHeight
      }, 1000);
   }
});

body {
    height: 1000px;  
}

.space {
    height: 500px;
}

#footer {
    height: 100px;
    background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Go</button>
<div class="space"></div>
<div id="footer"></div>

将浏览器视口底部滚动到元素顶部（jQuery）

2 个答案: