When you click on the link, the page scrolls to the anchor, but the page also has a fixed horizontal menu, and it turns out that the page is scrolling too much.

How to make the scrolling stop about 100 pixels from the anchor?

Here is the page code and script:

$(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>

    4 answers 4

    Do $target.offset().top - 100 , instead of 100, you can put the desired value in px, here's a piece of your code with the full function:

      $('html, body').stop().animate({ 'scrollTop': $target.offset().top - 100 }, 900, 'swing', function () { window.location.hash = target; });

      I earned c

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

      When removed the line:

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

        You need $target.offset().top - (menu height + 100).
        The solution is http://jsfiddle.net/gg7hg7m8/

          $('html, body').stop().animate({ 'scrollTop': $target.offset().top-($('ul').height()+ 100) }, 900, 'swing', function () { window.location.hash = target; });

        By adjusting the value in parentheses (100), you will adjust your indent.

          Try this:

           $(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; } } }); });