Кнопка вверх на jQuery

12.06.2017 09:21:48 am

Современные браузеры имеют функцию прокрутки страницы, как вверх, так и в низ, это удобно, но не для всех. Я написал код, который по клику прокрутит страницу к самому верху. Вот, что у меня получилось:
jQuery код:

/* Кнопка вверх */
$(document).ready(function() {
    var rise = '<div id="rise" style="display: none;" onClick="rise();"></div>';
    $('body').append(rise);

    $(window).scroll(function() {
        if ($(this).scrollTop() > $(window).height()) {
            $('#rise').fadeIn(1000);
        } 
        else {
            $('#rise').fadeOut(1000);
        };
    });
});

function rise() {
    $('html, body').animate({scrollTop: 0}, 1000);
}; /* Кнопка вверх END */

Класс CSS:

/* Кнопка вверх */
#rise {
    position: fixed;
    right: 15px;
    bottom: 15px;
    width: 64px;
    height: 64px;
    border-radius: 5px;
    opacity: 0.2;
    transition: 0.4s;
    background: url('url_img');
}

#rise:hover {
    cursor: pointer;
    opacity: 1;
} /* Кнопка вверх END */

Вместо url_img пропишите адрес свой картинки, а так же задайте ее размеры width и height, в данном коде размеры составляют 64 пикселя.

Для работы данного сценария, необходимо подключить библиотеку jQuery.

Жалоба

22.10.2017 07:04:48 pm

Возможно, при определенной ширине экрана выводить кнопку не надо. Это может быть полезным, если дизайн сайта адаптивный и в мобильных устройствах, кнопка появляется прямо на контенте ресурса, тем самым закрывает часть текста, например. Чтобы не выводить кнопку, скажем, если ширина экрана меньше 600 пикселей, замените код:

    $(window).scroll(function() {
        if ($(this).scrollTop() > $(window).height()) {
            $('#rise').fadeIn(1000);
        } 
        else {
            $('#rise').fadeOut(1000);
        };
    });

На:

	$(window).scroll(function() {
		if ($(document).width() >= 600) {
			if ($(this).scrollTop() > $(window).height()) {
				$('#rise').fadeIn(1000);
			} 
			else {
				$('#rise').fadeOut(1000);
			};
		};
	});

В строке:

		if ($(document).width() >= 600) {

Устанавливается ширина, от какого количества пикселей выводить кнопку. При необходимости изменить 600 на свою ширину.

Жалоба