При клике на ссылку идет прокрутка страницы к якорю, но на странице также есть фиксированное горизонтальное меню, и получается, что страница прокручивается слишком много.
Как сделать, чтобы прокрутка останавливалась примерно в 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;
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Плавная навигация на странице | Howtomake</title>
<script type="text/javascript">
</script>
</head>
<body>
<aside>
<ul>
<li><a href="#one">One</a></li>
<li><a href="#two">Two</a></li>
<li><a href="#three">Three</a></li>
<li><a href="#four">Four</a></li>
<li><a href="#five">Five</a></li>
<li><a href="#six">Six</a></li>
</ul>
</aside>
<div id="main">
<h2 id="one">One</h2>
<p>Тут текст Lorem Ipsum</p>
<h2 id="two">Two</h2>
<p>Тут текст Lorem Ipsum.</p>
<h2 id="three">Three</h2>
<p>Тут текст Lorem Ipsum</p>
<h2 id="four">Four</h2>
<p>Тут текст Lorem Ipsum</p>
<h2 id="five">Five</h2>
<p>Тут текст Lorem Ipsum</p>
<h2 id="six">Six</h2>
<p>Тут текст Lorem Ipsum</p>
</div>
</body>
</html>