Кнопка вверх для сайта или up button.

Для кнопки нам понадобиться самое минимальное знание javascript и два стиля на css: visible and invisible.
Прописываем классы для кнопки, а потом и сам скрипт на javascript

<html>
<head>
</head>
<body>
    <p id="heder">heder</p>
<style>
#visible{
	bottom: 30px;
	position: fixed;
	right: 30px;
    scroll-behavior: smooth;
}
.invisible{
	opacity: 0;
}
</style>
<script>
 window.onload=function(){
            if(scrollY< 100){
                document.getElementById('visible').classList.add('invisible');
            }
        }
        window.addEventListener('scroll', function(){ 
            
            if(scrollY < 100){
                document.getElementById('visible').classList.add('invisible');
            }else{
                document.getElementById('visible').classList.remove('invisible');
            
            document.getElementById("visible").onclick = function(){
                window.scrollTo(0,0);
                
            } 
            }
        });
</script> 

<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<button id="visible"><img src="https://nasobe.ru/icon/up.svg" width="25px"></button>
</body>
<html>

На самом деле есть способ сделать кнопку еще проще. На одних только тегах и даже без js. Для этого создаем кнопку со стилем в котором находиться якорь на страницу с <p id=»heder»>heder</p> или похожем способом присвоить ссылку заголовку. Таким способом кнопка вверх (up_button) работает даже в самом плагине для amp страниц, потому что сдвинуться в верх легче способа просто нету.  Далее остается с самого дна сослаться на неё. <a href=»#heder»>И вжух…</a>

P.S. Сама кнопка вжух. ->Вжух! <- тут.
Up button или кнопка вверх для сайта
кнопка вверх

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *