Кнопка наверх для сайта с использованием jQuery (4 примера реализации)
Реализуем кнопку "наверх" для сайта максимально простым способом без использования плагинов. Я покажу 4 примера реализации таких кнопок. Несмотря на то, что примеры будут отличаться друг от друга (дизайном или функциональностью), принцип работы у них практически одинаковый.
Подключаем jQuery
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
#1 Простой, лёгкий скрипт для кнопки наверх
HTML
// Вместо слова "наверх" можно использовать картинку <img src="path"> <div id="button-up">Наверх</div>
CSS
#button-up{ display: none; opacity:0.5; filter:alpha(opacity=50); position: fixed; right: 20px; bottom: 100px; color: #000; transition: .3s; } #button-up:hover{ cursor: pointer; opacity: 1; filter:alpha(opacity=100); transition: .3s; color: #FF0000; }
jQuery
<script> $(document).ready(function() { var button = $('#button-up'); $(window).scroll (function () { if ($(this).scrollTop () > 300) { button.fadeIn(); } else { button.fadeOut(); } }); button.on('click', function(){ $('body, html').animate({ scrollTop: 0 }, 800); return false; }); }); </script>
#2 Кнопка наверх, используя иконки Fontawesome
Подключаем иконки Fontawesome
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
HTML
<div id="button-up"> <i class="fa fa-chevron-up"></i> </div>
CSS
#button-up{ display: none; position: fixed; right: 20px; bottom: 100px; color: #fff; background-color: #000; text-align: center; font-size: 30px; padding: 15px; transition: .3s; } #button-up:hover{ cursor: pointer; background-color: #FF0000; transition: .3s; }
jQuery
Код jQuery можно взять из первого примера.
#3 Кнопка наверх выплывает сверху
Интересный эффект появления кнопки. При прокрутке страницы вниз, кнопка выплывает сверху.
HTML
<div style="position: absolute; top: 456px; right: 0px; display:none;" class="button-up"></div>
CSS
.button-up{ background: #777 url(up.png) center center no-repeat; width: 32px; height: 32px; color: #fff; padding: 15px; margin: 20px; } .button-up:hover{ cursor: pointer; }
jQuery
<script> (function(jq) { jq.autoScroll = function(ops) { ops = ops || {}; ops.styleClass = ops.styleClass || 'button-up'; var t = jq('<div class="'+ops.styleClass+'"></div>'), d = jq(ops.target || document); jq(ops.container || 'body').append(t); t.css({ opacity: 0, position: 'absolute', top: 0, right: 0 }).on('click', function() { jq('html,body').animate({ scrollTop: 0 }, ops.scrollDuration || 1000); }); d.scroll(function() { var sv = d.scrollTop(); if (sv < 300) { t.clearQueue().fadeOut(ops.hideDuration || 200); return; } t.css('display', '').clearQueue().animate({ top: sv, opacity: 0.8 }, ops.showDuration || 500); }); }; })(jQuery); $(document).ready(function(){ $.autoScroll({ scrollDuration: 600, showDuration: 600, hideDuration: 300 }); }); </script>
#4 Кнопки наверх и вниз
В данном примере реализованы две кнопки: наверх и вниз. У пользователя появляется возможность скролить страницу как вверх, так и вниз соответственно.
HTML
<div id="arrows_site"> <div class="go-up" title="Вверх" id='ToTop'>⇧</div> <div class="go-down" title="Вниз" id='OnBottom'>⇩</div> </div>
CSS
#arrows_site{ position: fixed; width: 30px; background: #555; left: 0; top: 0; bottom: 0; height: 100%; } .go-up, .go-down { display: none; position: fixed; left: 0; cursor: pointer; color: #fff; text-align: center; text-shadow: 0 1px 2px #000; opacity: .4; font-size: 30px; margin-bottom: 5px; width: 30px; height: 30px; transition: .4s; } .go-up { bottom: 50%; } .go-down { bottom: 45%; } .go-down:hover, .go-up:hover { opacity: 1; }
jQuery
<script> if ($(window).scrollTop() >= 150) $("#ToTop").fadeIn(800); $(window).scroll(function(){ if ($(window).scrollTop() <= 150) $("#ToTop").fadeOut(800); else $("#ToTop").fadeIn(800); }); if ($(window).scrollTop() <= $(document).height()) $("#OnBottom").fadeIn(800); $(window).scroll(function(){ if ($(window).scrollTop() >= $(document).height()) $("#OnBottom").fadeOut(800); else $("#OnBottom").fadeIn(800); }); $("#ToTop").click(function(){$("html,body").animate({scrollTop:0}, 800)}); $("#OnBottom").click(function(){$("html,body").animate({scrollTop:$(document).height()}, 800)}); </script>