单击页面中的href后向上滚动

Question

我有一个脚注系统。当我单击 sup 编号时，它会向下滚动到脚注。但它没有显示，因为粘性标题。 我需要在 href 滚动后向上滚动 60px 左右。

我尝试在“sup a”对象的 onclick 中添加 window.scrollBy(0, 60);。当我将它添加为函数时它也不起作用。

完整代码：

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

您可以使用 DATA 属性创建引用。

示例链接：<span class="reference" data="#one">ONE</span>

此脚本将收集所有具有class="reference" 类的元素，并为它们添加一个监听器。当元素被点击时，脚本会获取 DATA 信息，即页面应该滚动到的元素的 ID。

在此行中，您可以更改值60，以便信息保留在可见部分 window.scrollTo(0, top - 60);

在本例中，60px 是粘性导航的高度

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>

Answer 2

scrollBy(0, 60) 滚动向下，而不是向上滚动。您需要使用负数来反转方向。所以，window.scrollBy(0, -60)。

如果这仍然不起作用，那么您注册点击处理程序的方式可能有问题。如果你能展示你的完整代码将会很有用。