页面中的链接不起作用

Question

我在一页中遇到 link 问题。当我想向下滚动时它可以工作，但是当我想向上滚动时它会停留在同一个地方。这是代码的一部分：

(function($){
/* Store the original positions */
var d1 = $('.one');
var d1orgtop = d1.position().top;
var d2 = $('.two');
var d2orgtop = d2.position().top;
var d3 = $('.three');
var d3orgtop = d3.position().top;
var d4 = $('.four');
var d4orgtop = d4.position().top;

/* respond to the scroll event */
$(window).scroll(function(){
    /* get the current scroll position */
    var st = $(window).scrollTop();

    /* change classes based on section positions */
    if (st >= d1orgtop) {
        d1.addClass('latched');
    } else {
        d1.removeClass('latched');
    }
    if (st >= d2orgtop) {
        d2.addClass('latched');
    } else {
        d2.removeClass('latched');
    }
    if (st >= d3orgtop) {
        d3.addClass('latched');
    } else {
        d3.removeClass('latched');
    }
    if (st >= d4orgtop) {
        d4.addClass('latched');
    } else {
        d4.removeClass('latched');
    }
});

以及 JSFIDDLE 中的示例 JSFIDDLE

当我单击页面顶部的 href 时，它会向下滚动。但是当我点击底部的 href 时，没有任何反应。我的错在哪里？

Answer 1

DEMO

因为你的风格 position:fixed .latched class。你删除它你修复它但是是的它会影响我的可视化的原始功能。因此，作为替代方案，我有以下 jquery hack，它实际上可以按要求运行。

$('a[href="#intro"]').on('click',function(){
  $(d1,d2,d3,d4).removeClass('latched');  
  //on click of #intro element you just remove latched class from all the elements
})

Answer 2

我遇到了类似的问题，出于其他一些原因，我使用了一个函数来设置滚动到页面。

我已经用您的示例进行了测试并且工作正常，请参阅 fiddle：https://jsfiddle.net/nft4oeab/3/

函数是：

function scrollToAnchor(aid){
    var aTag = $("a[name='"+ aid +"']");
    $('html,body').animate({scrollTop: aTag.offset().top},'slow');
}

希望对您有所帮助。

页面中的链接不起作用

Links in page don't work

html

javascript

css

jquery

href