В этой статье я расскажу, как установить на свой сайт кнопку (стрелочку) наверх без использования плагинов. Это всё делается очень легко и просто, буквально за несколько минут.
Итак, приступим. Для начала необходимо подключить библиотеку 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 :’ ‘,» вставьте ваш текст.