jQuery Scroll Down button used to scroll page by 100%

Question

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

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

Solution

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.

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

$('#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.