Как сделать плавный скролл по якорям типа /# и #?

Question

[Sergeev1ch]

https://katpht.herokuapp.com

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

JS

jQuery(document).ready(function($) {
	var myHash = location.hash; //получаем значение хеша
		location.hash = ''; //очищаем хеш
		if(myHash[1] != undefined){ //проверяем, есть ли в хеше какое-то значение
			$('html, body').animate(
			{scrollTop: $(myHash).offset().top}
			, 1500); //скроллим за полсекунды
			location.hash = myHash; //возвращаем хеш
		};
	});

Столкнулся с такой проблемой, что при переходе с главной страницы по якорям анимация не отображается.

HTML

<div class="nav">
		<a href="/">HOME</a>
		<a href="photo">PHOTO</a>
		<a href="picture">PICTURE</a>
		<a href="/#about">ABOUT</a>
		<a href="/#services">SERVICES</a>
		<a href="/#contacts">CONTACTS</a>
	</div>
<div id="fullpage">
			<div class="section block1"></div>
			<div id="about" class="section block2"></div>
			<div id="services" class="section block3"></div>
			<div id="contacts" class="section block4"></div>
		</div>

Comments

[Alex]

Столкнулся с такой проблемой, что при переходе с главной страницы по якорям анимация не отображается.

А с чего бы ей отображаться?

Answer 1

[Alex]

https://developer.mozilla.org/ru/docs/Web/CSS/scro...

Comments

[Sergeev1ch]

Не работает почему то, хотя скопировал пример на jsfiddle там все норм.

Answer 2

[Sergeev1ch]

Нашел решение с помощью скрипта fullpage.js

Comments

[Антон Литвиненко]

тащить фуллпейдж ради такой мелочи...

[Sergeev1ch]

Антон Литвиненко, от части согласен, предложи свой вариант.

[Антон Литвиненко]

Sergeev1ch, я просто отказался в последнем проекте)