Как сделать скролл до якоря с учётом высоты фиксированного Bootstrap меню?

Question

[NovakQuestions]

Здравствуйте,есть меню Bootstrap зафиксированное сверху,при попытке перейти по якорю,переход происходит без учета размера этого меню,хотелось бы узнать как это можно исправить.Спасибо.

<div class="row top_header">
			  	<div class="navbar navbar-default">
    	            <div class="container1">
    	                <div class="navbar-header">
    	                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#responsive-menu">
    	                        <span class="sr-only">Открыть навигацию</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
    	                    </button>
    	                </div>   
    	                <div class="collapse navbar-collapse" id="responsive-menu">
    	                    <ul class="nav navbar-nav">
    	                        <li><a href="index.html">Главная</a></li>
    	                        <li class="dropdown">
    	                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Описание тренажера<i class="glyphicon glyphicon-menu-down"></i></a>
    	                            <ul class="dropdown-menu">
    	                                <li><a class="close_menu" href="#">Преимущества</a></li>
    	                                <li><a class="close_menu" href="#">Учебная программа</a></li>
    	                            	<li><a class="close_menu" href="#">Спецификация</a></li>
    	                            	<li><a class="close_menu" href="#">Демо-версия</a></li>
    	                            	<li><a class="close_menu" href="#">Статьи</a></li>
    	                        	</ul>
    	                		</li>
    	                		<li><a href="#">Возможности</a></li>
    	                		<li class="dropdown">
    	                    		<a href="#" class="dropdown-toggle" data-toggle="dropdown">Оформление заказа<i class="glyphicon glyphicon-menu-down"></i></a>
    	                       	 		<ul class="dropdown-menu">
    	                            		<li><a class="close_menu" href="order.html#order1">Сформировать заказ</a></li>
    	                        		</ul>
    	                		</li>
    	                		<li class="dropdown">
    	                    		<a href="#" class="dropdown-toggle" data-toggle="dropdown">Поддержка<i class="glyphicon glyphicon-menu-down"></i></a>
    	                        		<ul class="dropdown-menu">
    	                            		<li><a class="close_menu" href="#">Контакты</a></li>
    	                            		<li><a class="close_menu" href="#">F.A.Q.</a></li>
    	                        		</ul>
    	                		</li>
    	                		<li class="dropdown">
    	                    		<a href="#" class="dropdown-toggle" data-toggle="dropdown">О Компании<i class="glyphicon glyphicon-menu-down"></i></a>
    	                        		<ul class="dropdown-menu">
    	                            		<li><a class="close_menu" href="#">История</a></li>
    	                            		<li><a class="close_menu" href="#">Проекты</a></li>
    	                            		<li><a class="close_menu" href="#">Команда</a></li>
    	                        		</ul>
    	                		</li>
    	            		</ul>
    	        		</div>
    	    		</div>
        		</div>
		    </div>

Answer 1

[Анатолий]

$(document).ready(function() {
    $("a").click(function () {
        var elementClick = $(this).attr("href")
        var destination = $(elementClick).offset().top - $('.top_header').height();
        jQuery("html:not(:animated),body:not(:animated)").animate({scrollTop: destination}, 800);
        return false;
    });
});

Ну и как-то якорей я у вас не заметил. Для нормального перехода каждому якорю требуется дать имя.

<a href="#qwerty">К якорю</a>
<div id="qwerty">123</div>

Comments

[NovakQuestions]

Якорь у меня подцеплен с переходом на другую страницу,jquery так же подключен,но результат тот же.

<li><a class="close_menu" href="order.html#order1">Сформировать заказ</a></li>

[Анатолий]

NovakQuestions: Так бы сразу и сказали, что на другую страницу. Я сразу и не заметил. В этом случае данный скрипт не подойдет. Да и я представить себе не могу ситуацию, где может потребоваться плавное опускание до якоря на другой странице.

[NovakQuestions]

Я тестировал и на исходной странице,там результат тот же :D.

[Дмитрий Гаджиев]

Анатолий: как раз таки такую ситуацию представить очень просто)

Answer 2

[NovakQuestions]

Спасибо за вариант,подцепил этот скрип,но все работает так же,возможно я сделал что-то не так =/.

Comments

[Анатолий]

Не забудьте подключить JQuery и установить имена якорям (см. ответ). Также на будущее: лучше пишите в комментарии, а не в ответы.