Плавный скрол к якорю?

Question

[L1nw0od]

Доброго времени суток, есть сайт www.lightupukraine.com
Ситуация такая (мне нужно сделать плавный скролл, но когда он будет опускаться нужно чтоб он ставал не прям к якрю а на 100 пикселей выше якоря!
Вот так он сейчас

Вот так нужно чтоб было

Answer 1

[AltaiR]

Вот лучший вариант, который я нашел когда сам искал:

jQuery("body").on('click', '[href*="#"]', function(e){
  var fixed_offset = 100;
  jQuery('html,body').stop().animate({ scrollTop: jQuery(this.hash).offset().top - fixed_offset }, 1000);
  e.preventDefault();
});

Comments

[L1nw0od]

Есть еще одна проблемка, я использую сетку бутстрапа и использую аккардион и теперь он перестал открываться!

Answer 2

[iBird Rose]

$(document).ready(function(){
$('a[href*=#]').bind("click", function(e){
var anchor = $(this);
$('html, body').stop().animate({
scrollTop: $(anchor.attr('href')).offset().top - 100
}, 1000);
e.preventDefault();
});
return false;
});

Answer 3

[Aleksey Chernikov]

$(document).ready(function() {
  $('a[href^="#"]').click(function() {
      var target = $(this.hash);
      var pxOffset = 100; // Нужный отступ в пикселях
      if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]');
      if (target.length == 0) target = $('html');
      $('html, body').animate({ scrollTop: target.offset().top-$pxOffset}, 1000);
      return false;
  });
});

Comments

[L1nw0od]

Есть еще одна проблемка, я использую сетку бутстрапа и использую аккардион и теперь он перестал открываться!

[Aleksey Chernikov]

Дайте класс для ссылки, например .yourclass
и замените в коде $('a[href^="#"]') на $('.yourclass')

Answer 4

[Alexlife]

Если у вас меню не только на, например на главной но и на внутренних страницах, то лучше использовать так

jQuery( document ).ready(function($) {
	var $page = $('html, body');
$('.yourclass a').click(function() {
	var target = $(this.hash);
    $page.animate({
		scrollTop: target.offset().top - 50
    });
    return false;
});
		});

В таком случае в ссылке меню можно использовать не только с #, но ставить и полный путь