Вопрос:
Как я должен указывать CSS (предпочтительнее только CSS или, альтернативно, CSS + JS) для кнопки “сверху” на странице, чтобы кнопка была видна только в том случае, если содержание страницы больше высоты экрана пользователя. Я не хочу, чтобы кнопка была видимой, если содержимое конкретной страницы хорошо вписывается в один экран на конкретном устройстве (без необходимости прокрутки). Код кнопки прост:
<a href=»#top» class=»arrow-top»>Top</a> Лучший ответ:$(document).scroll(function() { var y = $(this).scrollTop(); if (y > 100) { $(‘.arrow-top’).fadeIn(); } else { $(‘.arrow-top’).fadeOut(); } });body{ height: 2000px; } .arrow-top{ display: none; position: fixed; bottom: 2px; right: 10px; padding: 10px; background: #222; color: #ddd; }<script src=»https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js»></script> <body> <a class=»arrow-top» href=»»>Top</a> </body>
Используйте функцию прокрутки jquery для отображения или скрытия элемента в прокрутке. Получите ссылку на приведенный ниже код.
$(document).scroll(function() { var y = $(this).scrollTop(); if (y > 100) { $(‘.arrow-top’).fadeIn(); } else { $(‘.arrow-top’).fadeOut(); } });
Установить display: none; для .arrow-top изначально в вашем css. и он будет отображаться только в том случае, если вы прокрутите документ ниже 100 пикселей. Вы можете настроить высоту прокрутки в соответствии с вашими требованиями.
Изменение: обновлено с помощью фрагмента.
Надеюсь, это поможет.
Ответ №1if( $(window).height()<$(«body»).height()){ $(«.arrow-top»).show(); }.arrow-top { position: fixed; bottom: 6%; right: 1.5%; display: none; z-index: 9999; background: transparent; border: 3px solid #e82a62; border-radius: 50%; height: 50px; width: 50px; text-align: center; font-size:50px; text-decoration:none; color:#e82a62; }<script src=»https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js»></script> <div> <p>Bala</p> <p>Bala</p> <p>Bala</p> <p>Bala</p> <p>Bala</p> <p>Bala</p> <p>Bala</p> <p>Bala</p> <p>Bala</p> <p>Bala</p> <p>Bala</p> <p>Bala</p> <p>Bala</p> <p>Bala</p> <p>Bala</p> <p>Bala</p> <p>Bala</p> <p>Bala</p> <p>Bala</p> <p>Bala</p> <p>Bala</p> <p>Bala</p> <p>Bala</p> <p>Bala</p> </div> <a href=»#top» style=»display:none;» class=»arrow-top»>^</a>
