jQuery Scroll Down 按钮用于滚动页面 100%答案

【问题标题】：jQuery Scroll Down button used to scroll page by 100%jQuery Scroll Down 按钮用于滚动页面 100%
【发布时间】：2014-01-19 18:51:26
【问题描述】：

我正在制作一个网站，但在使用 jQuery 将页面向下滚动 100% 的按钮时遇到问题。我遇到了麻烦，因为它在浏览器和窗口大小之间滚动不同的空间。我的问题有什么解决办法吗？顺便说一下，这是我的代码...

jQuery

var screenheight100 = css('height', '100%');
$('#gdb1').click(function(){
    $("html, body").animate({ scrollTop: (screenheight100)}, 600);
    return false;
 });

HTML

<div class="gdbox"><div id="gdb1" class="gdbutton fontwhitenshadow">Q</div></div>

CSS

.gdbox{width: 100%;
       height: 35px;
       position: absolute;
       bottom: 30px; 
       text-align: center;
       overflow: visible;
}
.gdbutton{margin: 0 auto;
          height: 20px;
          padding-bottom: 20px;
          text-align: center;
          width: 40px;
          font-family: iconFont;
          font-size: 45px;
          cursor: pointer;
}

【问题讨论】：

标签： jquery html css button scroll

【解决方案1】：

我假设您想要实现的是将窗口滚动为窗口高度。

但是css()不是全局函数，它是一个jQuery对象方法。

你可以通过.height()方法得到窗口的高度：

$('#gdb1').click(function(){
    $("html, body").animate({ scrollTop: $(window).height()}, 600);
    return false;
});

Working Fiddle

但是如果你想在元素顶部滚动窗口，你可以通过$(selector).offset().top获得所需的空间。

【讨论】：

【解决方案2】：

您可以在页面上放置一个隐藏元素并始终滚动到该元素的顶部。这将为您提供跨浏览器的更多一致性。

【讨论】：