Scroll up after click a href in page

Question

I have a footnote system. When I click sup number it scroll down to footnote. But It didn't show because of sticky header. I need to scroll up around 60px after href scrolling.

I tried to add window.scrollBy(0, 60); in onclick of "sup a" object. It didn't work when I add it as function as well.

Full code:

    $(document).ready(function() {

// make a link out of any <sup> with class .footnoted
$('sup').each(function(i){
var superscript = i+1;
$(this).html('<a>' + superscript + '</a>');
});


// give <sup class="footnoted"> an id to scroll back to
$('sup').each(function(i){
this.id = "reading-position-"+(i+1);
});

// tell the superscripts where to go
$('sup a').each(function(i){
this.href = "#footnote-"+(i+1);
});

// set a target for the superscripts to scroll to
// if you're not using a list for your footnotes, change li to the correct selector
$('ol li').each(function(i){
this.id = "footnote-"+(i+1);
});

// add return to reading position link at the end of the footnote
$('ol li').append('<a rel="nofoot"> &uarr; Okuma Alanına Geri Dön</a>');

// give the return to position url an href of the target ID
$('ol li a').each(function(i){
this.href = "#reading-position-"+(i+1);
});

// make a back to top link at the end of your footnotes
// if you're not using a list for your footnotes, change li to the correct selector


// smooth scroll between reading position and footnotes
$('sup a[href^="#"]').on('click',function (e) {
e.preventDefault();

var target = this.hash,
$target = $(target);

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

// remove class and link to previous reading position from other <li> if you scrolled to a footnote previously
{#$('.current-footnote span').remove();#}
{#$('ol li').removeClass('current-footnote');#}

// add return to reading position link and give the current footnote a class for additional styles
$(target).addClass('current-footnote');
$('.current-footnote span').css('display', 'inline');
});

Answer 1

scrollBy(0, 60) scrolls down, not up. You need to use negative numbers to reverse the direction. So, window.scrollBy(0, -60).

If that still doesn't work, something is probably wrong with how you're registering the click handler. It would be useful if you could show your full code.

Answer 2

You can create references using the DATA attribute.

Example link: <span class="reference" data="#one">ONE</span>

This script will collect all elements with class class="reference" and add a listener to them. When the element is clicked, the script will take the DATA information which is the ID of the element to which the page should be scrolled.

In this line you can change the value 60 so that the information remains in the visible part window.scrollTo(0, top - 60);

In this example, 60px is the height of the sticky navigation

var navLinks = document.querySelectorAll('.reference');
for (let i = 0; i < navLinks.length; i++) {
    navLinks[i].addEventListener("click", function () {
        var elId = this.getAttribute('data');
        var top = document.querySelector(elId).offsetTop;
        window.scrollTo(0, top - 60);
    });
}

body {
    margin: 0px;
}

nav {
    height: 60px;
    background: orangered;
    position: fixed;
    width: 100%;
    top: 0px;
}

.reference {
    cursor: pointer;
    color: orangered;
}

#wrap {
    margin-top: 60px;
}

<nav>Navigation...</nav>

<div id="wrap">
    <div>
        Lorem ipsum dolor, <span class="reference" data="#one">ONE</span> sit amet consectetur adipisicing elit. Cum nihil vero voluptatibus tempora repellendus <span class="reference" data="#two">TWO</span> aperiam quidem debitis, totam consequuntur ex aspernatur quasi quod molestias rem quibusdam? Facilis adipisci asperiores iste. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum nihil vero voluptatibus tempora repellendus aperiam quidem debitis, totam consequuntur ex aspernatur quasi quod molestias rem quibusdam? Facilis adipisci asperiores iste. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum nihil vero voluptatibus tempora repellendus aperiam quidem debitis, totam consequuntur ex aspernatur quasi quod molestias rem quibusdam? Facilis adipisci asperiores iste.
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>

    <p id="one">
        ONE - Reference One
        <br><br><br><br><br><br><br><br><br><br><br>
    </p>

    <p id="two">
        TWO - Reference Two
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </p>
</div>