Все для создания и продвижения сайтов

Верстка, программирование, SEO

Кнопка наверх для сайта html

количество просмотров 2010
Кнопка наверх для сайта html

Создать кнопку "наверх" для сайта не представляет особых усилий.

Давайте же создадим её на языках html,css и jquery.

Html нужен для разметки, css - для оформления.

Jquery в нашем случае даст немного анимации, а именно, будет скрывать кнопку когда мы будем находится на верху странице, немного спускаясь она будет плавно появляться и самое главное, данный скрипт нам даст плавный подъём наверх страницы при нажатии на кнопку, без резких движений, что будет очень красиво смотреть на любом сайте.

Создание кнопки наверх

1. Добавим между тегами "body" разметку нашей кнопки.

Наверх

Вместо текста, можно вставить картинку или блок.

2. Добавим немного оформления на CSS.

		#toTop{
			background-color: #aaca3c;
			padding: 5px;
			cursor: pointer;
			z-index: 9999;
			bottom: 10px;
			right: 10px;
			position: fixed;
		}

3. Подключим библиотеку Jquery перед закрывающем тегом body(Если её нет).


4. Теперь вставим наш скрипт на jquery после подключения библиотеки jquery.

		$(function(){$.fn.scrollToTop=function(){
			$(this).hide().removeAttr("href");
				if($(window).scrollTop()!="0"){
					$(this).fadeIn("slow")
				}
				var scrollDiv=$(this);
				$(window).scroll(function(){
					if($(window).scrollTop()=="0"){
						$(scrollDiv).fadeOut("slow")
						}else{$(scrollDiv).fadeIn("slow")}
					});
					$(this).click(function(){
						$("html, body").animate({scrollTop:0},"slow")
					})
		}});
		// Вызов
		$(function() { 
			$("#toTop").scrollToTop(); 
		}); 

Здесь две функции, в первой мы прописываем все эффекты, во второй мы вызываем эту функцию для определённого объекта, в нашем случае это #toTop.

Вот так просто мы и создали кнопку "наверх".

Последние статьи

Инструменты

Отблагодарить и поддержать автора
Если вы нашли ошибку, выделите её и нажмите Ctrl+Enter
Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.