Блог

Есть ли способ использовать javascript для определения того, не может ли содержимое html поместиться на экране (прокручивается), чтобы показывать кнопку «вернуться к началу» только при необходимости?

Если вы с удовольствием используете jQuery, вы можете попробовать найти высоту окна и сравнить ее с высотой элемента оболочки. Если высота элемента больше, покажите кнопку.

 var x = $(window).height();
if ($('#test').height() > x) {
  alert('scrollable');
  //add in button here
}  

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" style="height:2000px;background:silver"></div>  

Трудно сказать, но, возможно, вы могли бы использовать элемент document.getElementById() , а затем использовать innerHeight (http://www.w3schools.com/jsref/prop_win_innerheight.asp ), чтобы определить, превышает ли элемент высоту.

Редактировать — похоже, я, возможно, немного неправильно понял. Если вы хотите проверить все содержимое HTML на странице, вы можете использовать что-то вроде scrollHeight (https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight ) вкл document .

Вы можете сравнить высоту страницы с высотой вашего браузера:

 document.body.offsetHeight < screen.availHeight
  

Это вернет true, если страница подходит. Хотя для вашей цели, почему бы просто не показать кнопку, если пользователь вообще прокручивается вниз? Предполагая, что вы можете использовать jQuery,

 $(window).scroll(function(){
    if ($(document.body).scrollTop() > 0)
    {
        //Add or show button here
    }
})
  

Он не поддерживается IE, но мой любимый ванильный javascript всегда:

 var scrollHeight = window.scrollY;
console.log(scrollHeight);