Как сделать кнопку наверх с помощью jQuery без плагинов

В этой статье я расскажу, как установить на свой сайт кнопку (стрелочку) наверх без использования плагинов. Это всё делается очень легко и просто, буквально за несколько минут.

Итак, приступим. Для начала необходимо подключить библиотеку jQuery, её можно скачать в разделе «Программы» и залить её в корень вашего сайта.

Далее создаём файл «upScrollButton.js» и записываем туда следующий код:

Файл upScrollButton.js:

jQuery.fn.upScrollButton = function( options ) {
var options = jQuery.extend( {

heightForButtonAppear : 200, // дистанция от верхнего края окна браузера, при превышении которой кнопка становится видимой
heightForScrollUpTo : 0, // дистанция от верхнего края окна браузера к которой будет прокручена страница
scrollTopTime : 1000, // длительность прокрутки (1 секунда)
upScrollButtonId : 'move_up', // id кнопки
upScrollButtonFadeInTime :300, // длительность эффекта появления кнопки (0.3 секунды)
upScrollButtonFadeOutTime :300,// длительность ффекта исчезновения кнопки (0.3 секунды)

        }, options );
        return this.each( function( ) {
        
                jQuery( 'body' ).append( '<a id="' + options.upScrollButtonId + '" href="#">' + options.upScrollButtonText + '' );
                jQuery( window ).scroll( function () {
                        if ( jQuery( this ).scrollTop()  > options.heightForButtonAppear )
                                jQuery( 'a#' + options.upScrollButtonId  ).fadeIn(options.upScrollButtonFadeInTime );
                        else
                                jQuery( 'a#' + options.upScrollButtonId ).fadeOut( options.upScrollButtonFadeOutTime );
                });
                jQuery( 'a#' + options.upScrollButtonId ).click( function ( ) {
                        jQuery( 'body,html' ).animate( {
                                scrollTop: options.heightForScrollUpTo
                        }, options.scrollTopTime );
                        return false;
                });
        });
}

Потом задаём стили нашей кнопки и записываем их в файл «cascad.css»:

Файл cascad.css:

    a#move_up {
position        : fixed; 
top             : 420px; 
right           : 15px;
width           : 70px; 
height          : 70px; 
display         : none;
background      : url(image/up.png); background-size:100% 100%;
opacity         : 0.9;
filter          : alpha(opacity = 90);
    }

a#move_up:hover {
background : url(image/up2.png); background-size: 100% 100%;
    }

Затем на странице где хотим установить кнопку, подключаем наши файлы:
«jQuery-1.7.1.js«,»upScrollButton.js» и «cascad.css» и вставляем этот код:

Файл index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title>кнопка наверх</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="keywords" content="ключевые слова для поисковиков">
<meta name="description" content="описать коротко о чем сайт">

<link href="cascad.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jQuery-1.7.1.js"></script>
<script type="text/javascript" src="upScrollButton.js"></script>

</head>

<body>
<script>
jQuery(document).ready(function() {

        jQuery( 'body' ).upScrollButton(
                {
                        upScrollButtonText :'',
                }
        );
});
</script>
<div align='center' style='padding:300px 10px 300px 10px;'>Текст</div>
</body>
</html>

Ну, вот собственно и всё, картинку меняйте на свою, при желании можно обойтись и без картинки, просто задайте фону нужный цвет и сюда (в файл «index.html»):
«upScrollButtonText :’ ‘,» вставьте ваш текст.

Рекомендуем к прочтению

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