Кнопки прокрутки страницы вверх и вниз jQuery

В этом уроке будем делать все на jQuery. Вам надо будет сделать три шага. Для начала добавить сами кнопки на страницы сайта. Добавлять можно куда угодно. Для удобства можете добавить в подвал сайта.

Это просто html код блока с двумя ссылками
<div class="scroll_panel">
    <a href="#" id="scroll_top"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 16.67l2.829 2.83 9.175-9.339 9.167 9.339 2.829-2.83-11.996-12.17z"/></svg></span></a>
    <a href="#" id="scroll_bottom"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z"/></svg></span></a>
</div>

Далее можете добавить стили. Они могут быть любыми, как вам удобно и вы хотите видеть на своем сайте. В моем примере кнопки плавают поверх сайта. Вы можете разместить кнопки по отдельности одну вверху и вторую внизу. Тогда вам не надо родительский блок, а просто используйте ссылки.

Вот готовые стили, как в примере:
.scroll_panel {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 90px;
    transition: background 0.2s ease;
}
.scroll_panel:hover {
    background: #eee; 
}
 
  
.scroll_panel svg {
fill:#f00;
}
 
#scroll_top {
    display: block;
    width: 100%;
    height: 50%;    
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    transition: background 0.2s ease;
}
#scroll_top span {
    display: block;
    width: 100%;    
    position: absolute;
    left: 0;    
    top: 50px;
}
#scroll_top:hover {
    background: #ddd;   
}
 
#scroll_bottom {
    display: block;
    width: 100%;
    height: 50%;    
    position: absolute;
    top: 50%;
    left: 0;
    text-align: center;
    transition: background 0.2s ease;
}
 
#scroll_bottom span {
    display: block;
    width: 100%;    
    position: absolute;
    left: 0;    
    bottom: 20px;
}
#scroll_bottom:hover {
    background: #ddd; 
}

Последнее что нужно сделать - добавить скрипт jQuery, который и будет переносить нас в начало или конец страницы.
<script>
$(function(){
    $('#scroll_top').click(function(){
        $('html, body').animate({scrollTop: 0}, 600);
        return false;
    });
     
    $('#scroll_bottom').click(function(){
        $('html, body').animate({scrollTop: $(document).height() - $(window).height()}, 600);
        return false;
    });
});
</script>

Данный скрипт нужно добавлять только после библиотеки - jQuery. Она должна быть подключена у вас, если вы используете CMS, например WordPress. Если у вас самописный сайт, то вы должны были ее добавлять, если нет, то добавьте.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>


Если все правильно сделано, то результат будет как в примере. Думаю, данный урок не из сложных и проблем у вас не возникло, если что не так, спрашивайте в комментариях или связывайтесь со мной.
  Кнопки, прокрутка страницы
Похожие новости:
Добавлено: 24 Марта 2021 06:21:05 Добавил: Андрей Ковальчук
Добавить