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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/21221086/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 01:29:32  来源:igfitidea点击:

jQuery Scroll Down button used to scroll page by 100%

jqueryhtmlcssbuttonscroll

提问by Lae

I am making a website and having trouble with a button that uses jQuery to scroll the page down by 100%. I'm having trouble because it scrolls different spaces between browsers and window sizes. Any solution to my problem? By the way here's my code ...

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

jQuery

jQuery

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

HTML

HTML

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

CSS

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;
}

回答by Hashem Qolami

I assume what you want to achieve is scrolling the window as window height.

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

But css()is not a global function, it's a jQuery object method.

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

you could get the height of window by .height()method:

您可以通过.height()方法获取窗口的高度:

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

Working Fiddle

工作小提琴

But If you want to scroll the window right on the top of an element, you could get the needed space by $(selector).offset().top.

但是如果你想在元素的顶部滚动窗口,你可以通过$(selector).offset().top.

回答by arb

You could put a hidden element on the page and always scroll to the top of that element. That would give you much more consistency across browsers.

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