水平滚动页面链接无法在其他页面上使用

Question

我的页面中有一个部分，借助一些Javascript可以水平滚动。 问题是，如果我从另一个页面引用这些水平部分的链接，则这些链接将不起作用。 这里是工作示例（主导航中的“我们提供什么”子链接）： http : //fitnessacademysurrey.cloudlevel.me

如果我导航到博客页面，然后使用“我们提供的内容”子链接，则它们不会执行任何操作。

这是链接的代码：

$(document).ready(function () {
var sildeNum = $('.page').length,
    wrapperWidth = 100 * sildeNum,
    slideWidth = 100/sildeNum;
$('.wrapper').width(wrapperWidth + '%'); 
$('.page').width(slideWidth + '%');

$('a.scrollitem').click(function(){
    $('a.scrollitem').removeClass('selected');
    $(this).addClass('selected');

    $('#nav-subnav ul li').removeClass('active');
    $('.panelHeading').addClass('hidden');
    $("a.scrollitem").each(function(index) {
    if($(this).hasClass("selected"))
        $("#nav-subnav ul li:nth-child("+(index+1)+")").addClass("active"),
        $(".panelHeading:nth-child("+(index+2)+")").removeClass("hidden");
    });

    $('#nextLink').removeClass('disabled');
    $('#previousLink').removeClass('disabled');
    if($('#nav-subnav ul li.active').is(':last-child'))
        $('#nextLink').addClass('disabled');

    if($('#nav-subnav ul li.active').is(':first-child'))
        $('#previousLink').addClass('disabled');

    var slideNumber = $($(this).attr('href')).index('.page'),
        margin = slideNumber * -100 + '%';

    $('.wrapper').animate({marginLeft: margin},500);
    return false;

  });
});
$( function() {
  var hash = window.location.hash;
  if (hash.length > 1) {
    $("[href='" + hash + "']").click();
  }
});

previousLink和nextLink用于其他导航，但是我认为这无关。

有人可以帮忙吗？

Answer 1

很好的问题是，您使用JavaScript来滚动页面，因此您需要添加代码以读取哈希并找到正确的链接并单击它。

$( function() {
    var hash = window.location.hash;
    if (hash.length > 1) {
        $("[href='" + hash + "']").click();
    }
});