Як зробити кнопку "наверх"

Відео: Як зробити кнопку Вгору (Вгору) на сайті, як Вконтакте + плавний скролл. HTML + CSS + jQuery

Напевно, Ви часто зустрічали кнопку "наверх". Іноді це кнопка, іноді посилання, це не важливо. Наприклад, це кнопка є вконтакте. І в цій статті я розповім, як зробити кнопку "наверх".

кнопка "наверх"Дозволяє швидко перейти до самого верху сторінки. Є різні способи її реалізації, однак, є, на мій погляд, самий простий і зручний спосіб - через використання унікальних ідентифікаторів.

Відео: Як зробити кнопку «наверх» для WordPress сайту

Давайте відразу наведу код, і Ви все зрозумієте:

id="Top"gt; 
 
href="#top"gt;наверх

Відповідно, при кліці по посиланню "наверх"Ми потрапимо на елемент з id = "top", тобто той самий div. Якщо його розташувати відразу після body, то це і буде самий верх сторінки. Як бачите, все дуже просто.

Є ще один спосіб, він ще простіше цього, однак, тут потрібне використання jаvascript. Ось код:

href="jаvascript: scroll (0,0) ;"gt;наверх

Знову при кліці ми потрапимо на самий верх сторінки, але тут вже не потрібно додавати порожні блоки з потрібним id. Тобто код виходить коротше, але недолік - це використання jаvascript.

Відео: Встановлюємо кнопку "повернутися наверх" на сайті в Adobe Muse

Класичним і більш надійним є саме перший спосіб, зате більш короткий - другий спосіб. Який саме спосіб використовувати для створення кнопки "нагору", вибирати Вам.

Поділися в соціальних мережах:

Схожі