Уроки:


  
HTML
  
  
CSS
  
  
PHP
  
  
JavaScript
  
  
jQuery
  
  
PHP+MySQL
  
  
Ajax
  

  Разделы:


  В помощь:


  Ещё:



  Авторизация:


  логин:   
  пароль: 
Один программист — другому:
— Вот представь: у тебя есть 1000 рублей... Или, для круглого счета, пусть у тебя 1024...

  Тренажер интуиции:


Тренажер интуиции


  Видеокурсы:


Бесплатный видеокурс: "Cайт-визитка за 1 день"

видеокурс: Сайт-визитка за один день



  Опрос:



  Топ комментаторов:


40

Говорят, что перед смертью админ вспоминает все свои пароли.

  Моя группа в контакте:



Как сделать кнопку наверх с помощью 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 :' '," вставьте ваш текст.

Комментарии


Нет комментариев. Вы можете стать первым !

Ваш комментарий



Почта: info@web-shpargalka.ru