Кнопка наверх для сайта с использованием 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>
Предыдущая запись
jQuery: Gritter - плагин уведомлений на сайтеСледующая запись
Адаптивное многоуровневое горизонтальное меню на CSS + jQuery