Одностраничный сайт, как сделать такой эффект?

Question

[ArtemGolubkov]

Ребят, всем добрый день!
Делаю одностраничный сайт, хочу попробовать как тут:
doublebar.businesscatalyst.com/index.html#barmen

Как сделать, чтобы при нажатии на ссылку " О Нас" к примеру, перемещалось в этот раздел?

Answer 1

[Appp Zooo]

htmlbook.ru/samhtml/yakorya
Только там же еще параллакс.
Пример якоря:

<a href="#onas">О нас</a>
<div name="onas"></div>

Для плавного скролла:
jsfiddle.net/YtJcL

Comments

[Alex Kheben]

# - ссылка не на name, а на id
Поэтому будет вот так:

<a href="#onas">О нас</a>
<div id="onas">sometext</div>

[Alex Kheben]

Но и это не решение.
Тут не учитывается смещение, которое нам необходимо из-за фиксированного хидера. И перемещение будет резким.

Тут без JS никак.

Answer 2

[ArtemGolubkov]

спасибо)

Comments

[Appp Zooo]

@ArtemGolubkov Примете решением?)

[ArtemGolubkov]

ага)

Answer 3

[GM2mars]

Ну если честно, то переход по якорям вас мгновенно перенесет на это место.
Скорее всего нужно получать относительную позицию элемента по Y и скролить с анимацией в это место, типа: jQuery("body").stop().animate({"scrollTop": Y-pos}, "fast");

Comments

[Appp Zooo]

@GM2mars спасибо что напомнили, а то правда вдруг надо плавное, я добавил фидл с примером и кодом.

Answer 4

[trtua]

еще один плавный скролл:
sitesource.ru/stati/scrollto-plagin-peremotki-skrolla