Не работает Scroll страницы с отступом

Почему не может найти id?

Uncaught TypeError: Cannot read property 'top' of undefined

<a href="#" data-id="1">play</a>
<a href="#" data-id="2">play</a>
<a href="#" data-id="3">play</a>
<a href="#" data-id="4">play</a>    

<div id="full-1" class="short-track">player</div>
<div id="full-2" class="short-track">player</div>
<div id="full-3" class="short-track">player</div>
<div id="full-4" class="short-track">player</div>

$(function(e){
    $('.page-content').animate({ scrollTop: $('full-'+$(this).data('id')).offset().top - 56 }, 500);
    e.preventDefault();
});

Вот этот код работает, но не могу отступ 56px сверху сделать

document.getElementById('full-'+$(this).data('id')).scrollIntoView({
    behavior: "smooth",
    block:    "start" 
});

Весь код где нужно сделать прокрутку к следующему треку, когда он начитает играть автоматически

$(function() {
    var _randomPlay = false;
    var _autoPlayNextPage = true;
    var el_jplayer = $('#jspplayer');
    var _track_id = 0;
    $("[data-player]").live('click', function() {
        $("[data-player]").not(this).removeClass('stop');
        el_jplayer.jPlayer("destroy");
        $('#set_track_title').html('Выберите трек');
        $('.jp-duration, .jp-current-time').html('00:00');
        var el = $(this);
        var el_track = el;
        var _track_title = el.attr('data-title');
        _track_id = el.attr('data-idn');
        document.title = "\u25b6 " + _track_title;
        $("[data-player]").parents('li').removeClass('current');
        el.parents('li').addClass('current');
        if(el.hasClass('stop')) {
            var el = $(this);
            el_jplayer.jPlayer("destroy");
            el.removeClass('stop');
            document.title = _track_title;
            el.parents('li').removeClass('current');
            return false;
        }
        var file_mp3 = el.attr("data-player");
        el_jplayer.jPlayer({
            ready: function() {
                $(this).jPlayer("setMedia", {
                    mp3: file_mp3
                }).jPlayer("play");
            },
            swfPath: "https://s.ru/player",
            supplied: "mp3",
            wmode: "window",
            cssSelectorAncestor: '',
            cssSelector: {
                seekBar: 'wave',
                playBar: 'wave>wave',
                play: ".jp-play",
                pause: ".jp-pause",
                stop: ".jp-stop",
                currentTime: ".jp-current-time",
                duration: ".jp-duration",
            }
        });
        el_jplayer.jPlayer("play");
        el.addClass('stop');
        el_jplayer.bind($.jPlayer.event.ended + ".repeat", function() {
            el.removeClass('stop');
            el.parents('li').removeClass('current');
            //Next play track
            if(el.attr('data-nextplay') == 'true') {
                var _nextPlayCount = $('[data-player]').size();
                var _nextPlay = el.index('[data-player]') + 1;
                $('[data-player]').eq(_nextPlay).click();
                if(_nextPlayCount == _nextPlay) {
                    _autoPlayNextPage = true
                    var _nextPage = $('.navipage-next span').next();
                    if(_nextPage.size()) {
                        _nextPage.click();
                    } else {
                        $('.navipage-next a').eq(0).click();
                    };
                };
            };
        });
        $('#set_track_title').html(_track_title);
        return false;
    });
    $('[data-player]').click(function() {
        $('#waveform').html('');
        var wavesurfer = WaveSurfer.create({
            container: document.querySelector('#waveform'),
            waveColor: '#ffffff',
            progressColor: '#1871C0',
            barWidth: 2,
            cursorWidth: 0,
            height: 34,
            barGap: 1,
            mediaType: 'audio',
            normalize: true,
            pixelRatio: 1,
            removeMediaElementOnDestroy: false,
        });
        wavesurfer.load($(this).data('player'));
        $('.jp-image').html('<a rel="ajaxlink" href="/' + $(this).data('url') + '"><img class="z-depth-1" src="' + $(this).data('image') + '" alt="' + $(this).data('title') + '"></a>');
    });
});