Плаўна пераходзіў ПА якар HTML

Як вам вядома, па націску на якарнай спасылку нас перакідае на тую частку старонкі з якой гэтая спасылка звязаная. Сам пераход адбываецца імгненна і гэты нюанс мы з вамі паправім.

Для таго каб рэалізаваць плыўны пераход пасля націску па спасылцы, нам неабходна будзе напісаць невялікі скрыпт, які ўлічвае момант націску, высветліць на які блок спасылаецца якар і плаўна Пракруціць старонку да патрэбнага месца. Але давайце пра ўсё па парадку 🙂
 

ДемоИсходники

1. Структура меню з якарным спасылкамі

Каб пры націску па спасылцы мы пераходзілі да вызначанага блоку, з абзацам, неабходна ў атрыбут href прапісаць імя ідэнтыфікатара таго блока на які мы хочам спаслацца, напрыклад:
у нас ёсць блока

... , унутраная спасылка на гэты блок будзе мець наступны выгляд:
Такім чынам усе спасылкі спасылаюцца на ID блокаў.
Вось і сам код меню з дэма-прыкладу:

Кожная спасылка спасылаецца на адпаведны блок:

<Ідэнтыфікатар раздзела = "EX1"> ...
<Ідэнтыфікатар раздзела = «ех2»> ...
<Ідэнтыфікатар раздзела = "EX3"> ...
<Ідэнтыфікатар раздзела = "ex4"> ...

2. Скрыпт плыўнага пераходу да патрэбнага блоку

Такім чынам нам трэба апрацаваць націску па спасылках у нашым меню, адмяніць стандартныя паводзіны, высветліць на які блок спасылаецца якар і аніміраваныя пераход.

 
$ (Дакумент) .ready (функцыя () {
	$ ( "# Меню"). На ( "націсніце", "а", функцыя (падзея) {
		// адмяняем стандартную апрацоўку націску па спасылцы
		event.preventDefault ();

		// забіраем ідэнтыфікатар бакі з атрыбуту href
		вар ID = $ (гэта) .attr ( 'HREF'),

		// даведаемся вышыню ад пачатку старонкі да блока на які спасылаецца якар
			Top = $ (ID) .offset () зверху.
		
		// анимируем пераход на адлегласць - top за 1500 мс
		$ ( 'Цела, HTML') аніміраваць ({scrollTop: зверху}, 1500) ;.
	});
});

 

Чытай яшчэ:   паскорыць прагляд РАБОЧЕГО СТОЛА WINDOWS XP

ДемоИсходники

Кожную радок скрыпту я пракаментаваў, калі засталіся пытанні пішы ў каментарах да паста - дапамагу 😉

Плыўныя скролінг да якара JAVASCRIPT


Чытай на іншых мовах

 беларускіанглійская Нямецкі іспанскі французскі італьянскі партугальская турэцкі арабская ўкраінскі шведскі венгерская балгарскі эстонскі Кітайскі (спрошчаны) в'етнамская румынская тайская славенская славацкая сербская малайская нарвежская латышская Літоўскі карэйская японскі інданезійская хіндзі іўрыт фінскі грэцкі нідэрландская чэшскі дацкая харвацкая Кітайскі (традыцыйны) тагальская урду Азейбарджанский армянскіпольскі бенгальская грузінскі казахскі каталонская Mongolski руская Таджитский Tamil'skij тэлугу Узбецкий

дадаць каментар

Ваш e-mail не будзе апублікаваны. Абавязковыя палі пазначаныя *