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