Smooth Scroll + Margin Top

Первый раздел

Скрипт плавного скроллинга

При нажатии на ссылку якорь, например: <a href="#one">Первый раздел</a>.

Элемент с аналогичным именем идентификатора, например: <h2 class="text-center" id="one">Первый раздел</h2>.

Будет плавно поднят до крайней верхней точки (топа).


<script>
$(function() {
 $('a[href*=#]:not([href=#])').click(function() {
 if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
 var target = $(this.hash);
 target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
 if (target.length) {
 $('html,body').animate({
 scrollTop: target.offset().top
 }, 1000);
 return false;
 }
 }
 });
});
</script>

Плавность (скорость) подъёма зависит от используемого значения, в примере задано: 1000. Чем меньше указано значение, тем выше скорость подъёма контента страницы.

Второй раздел

Скрипт плавного скролла с отступом от верхнего края

Если Вам нужно осуществить подъём элемента с отступом от верхнего края (топа), используйте скрипт, пример которого находится ниже.


<script>
$(function() {
 $('a[href*=#]:not([href=#])').click(function() {
 if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
 var target = $(this.hash);
 target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
 if (target.length) {
 $('html,body').animate({
 scrollTop: target.offset().top - 100
 }, 1000);
 return false;
 }
 }
 });
});
</script>