How do I scroll up the page 50px after clicking on an anchor link?

  • 0
    There is a website page, there are 4 tabs (with 2-3 tabs each).
    When you click on an anchor link on a page with tabs from other pages, the required tab opens in the required tab and scrolls automatically to the required element (div with the tab content) of the page.
    But this scrolling is carried out to the top of the div, and accordingly the top of the browser window matches the top of the div. And it turns out that the tabs and the title disappear.

    How to fix the script so that automatically when you follow links with anchors from other pages, after loading the desired page and automatically scrolling to the desired tab, there is also an automatic scrolling up by 50px?

    I use this code:
    (function($) {
    $(function() {
    $('ul.tabs').delegate('li:not(.current)', 'click', function() {
    $(this).addClass('current').siblings().removeClass ('current')
    .parents('div.tabs-content').eq(0).find('>').hide().eq($(this) .index()).fadeIn(500).show();
    var tabIndex = window.location.hash.replace('#tab','')-1;
    if (tabIndex != -1) $('ul.tabs li').eq(tabIndex).click();
    $('a[href*=#tab]').click(function() {
    var tabIndex = $(this).attr('href').replace(/(.*)#tab/, '')-1;
    $('ul.tabs li').eq(tabIndex).click();
    JavaScript Lucas Vazquez, Jan 1, 2019

  • 2 Answers
  • 0
    Nothing is clear, but very interesting)

    In the layout, make an additional div with an anchor, and at the positions, raise the div 50px up

  • 0
    Vea thanks! Solved by adding

    $ ('html, body'). animate ({scrollTop: $ (this) .offset (). top - 100}, 500);

    in the 7th line
    Adalaide Frye

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!