[LADYX]

Здравствуйте! Подскажите, пожалуйста, как изменить механизм работы скрипта, а именно, при выборе секции, чтобы она "подкручивалась" не под самый верх экрана, а с отступом от верха, например, 50px? Спасибо!

$(document).ready(function () {
    $(document).on("scroll", onScroll);

    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");
        
        $('a').each(function () {
            $(this).removeClass('panel-pp-active');
        })
        $(this).addClass('panel-pp-active');
      
        var target = this.hash,
            menu = target;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top+2
        }, 500, 'swing', function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });
});

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('#panel-pp a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#panel-pp ul li a').removeClass("panel-pp-active");
            currLink.addClass("panel-pp-active");
            var pageURL = $(location). attr("href");
            var splittedURL = pageURL.split('/')[0];
          
        }
        else{
            currLink.removeClass("panel-pp-active");
        }
    });
}

<style>
body, html {
    margin: 0;
    padding: 0 0 0 160px;
    height: 100%;
    width: 100%;
}
#panel-pp {
    width: 150px;
    height: 100%;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    background: rgba(255,255,255,1);
    -webkit-box-shadow: -1px 0px 5px rgba(0,0,0,.4);
    -moz-box-shadow: -1px 0px 5px rgba(0,0,0,.4);
    box-shadow: -1px 0px 5px rgba(0,0,0,.4);
    z-index: 11;
}
#panel-pp ul {
    margin: 15px 0 0 0;
}
#panel-pp ul li {
    list-style: none;
}
.panel-pp-main {
  padding: 10px 20px;
}
.panel-pp-main a {
    font-size: 16px;
    line-height: 30px;
    font-family: PT Serif,Georgia,Times New Roman,Times,serif;
    text-decoration: none;
    color: #333;
}
.panel-pp-main .panel-pp-active {
    color: #da251e;
    color: rgb(218,37,30);
}
#pp1,
#pp2,
#pp3 {
height: 300px;
}
</style>
1<br>1<br>1<br>1<br>1<br>1<br>1 <br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br> 1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1 <br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<div id="pp1">Секция 1</div>
<div id="pp2">Секция 2</div>
<div id="pp3">Секция 3</div>
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br> 1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br> 1<br>1<br>1<br>1<br>1<br>1<br>
<div id="panel-pp">
<div class="panel-pp-main">
<ul>
<li><a href="#pp1">Один</a></li>
<li><a href="#pp2">Два</a></li>
<li><a href="#pp3">Три</a></li>
</ul>
</div>
</div>