Прокрутка к якорю с отступом сверху

#javascript #html #scroll

При клике на ссылку идет прокрутка страницы к якорю, но на странице также есть фиксированное
горизонтальное меню, и получается, что страница прокручивается слишком много.

Как сделать, чтобы прокрутка останавливалась примерно в 100 пикселях от якоря?

Вот код страницы и скрипт:



    $(document).ready(function(){
    // = Вешаем событие прокрутки к нужному месту
    	//	 на все ссылки якорь которых начинается на #
    	$('a[href^="#"]').bind('click.smoothscroll',function (e) {
    		e.preventDefault();
    
    		var target = this.hash,
    		$target = $(target);
    
    		$('html, body').stop().animate({
    			'scrollTop': $target.offset().top
    		}, 900, 'swing', function () {
    			window.location.hash = target;
    		});
    	});
    
    });






  
  
  
  


  
  

    

      
One
      
Two
      
Three
      
Four
      
Five
      
Six
    
  
  

    
One
    
Тут текст Lorem Ipsum
    
Two
    
Тут текст Lorem Ipsum.
    
Three
    
Тут текст Lorem Ipsum
    
Four
    
Тут текст Lorem Ipsum
    
Five
    
Тут текст Lorem Ipsum
    
Six
    
Тут текст Lorem Ipsum
  





    

Ответы

Ответ 1

Сделайте так $target.offset().top - 100, вместо 100 можно поставить нужное значение
в px, вот кусок вашего кода с полной функцией:
 $('html, body').stop().animate({
    'scrollTop': $target.offset().top - 100
 }, 900, 'swing', function () {
    window.location.hash = target;
 });


Ответ 2

У меня заработало c 

scrollTop': $target.offset().top - ($('#nav-container').height()+ 50)


Когда убрала строку: 

function () {window.location.hash = target;}


Ответ 3

Вам нужно $target.offset().top - (высота меню + 100).
Решение http://jsfiddle.net/gg7hg7m8/
    $('html, body').stop().animate({
        'scrollTop': $target.offset().top-($('ul').height()+ 100)  
        }, 900, 'swing', function () {
            window.location.hash = target;
    });

Регулируя значение в скобочках (100), вы будете регулировать ваш отступ.


Ответ 4

Попробуйте вот это:

$(function(){
    $('a[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) {
                var targetOffset = $target.offset().top - ($("#main-header").outerHeight(true)+
20); //#main-header - заменить на ваш элемент
                $('html,body').animate({scrollTop: targetOffset}, 1000);
                return false;
            }
        }
    });
});