Question

我有一个向左滚动的横向网站。

我正在尝试将固定到顶部的导航水平滚动到每个导航ID的锚标记。

这是文件的JSFiddle。

代码段如下：

$(document).ready(function(){
    
    $('.scrollPage').click(function() {
        var anchor = String($(this).attr("href")).replace("#","");
        var selector = 'div[name="' + anchor + '"]';
        var e = $(selector);
        var left = e.offset().left;
       $('html, body').animate({scrollLeft: left }, 800);
       return false;
    });
});

body {
    background:url(images/fill.jpg) #74beb2 repeat scroll;
    font-size: 12px;
    margin-top:0;
    min-width:1140px;
    overflow: scroll;
    padding-top:0;
    height:768px;
}

#container {
    height:768px;
    width:17000px;
    float:left;
    position:relative;
}


nav {
    background:url(images/nav.png) no-repeat;
    height:80px;
    width:977px;
    position:fixed;
    margin-left:67px;
    margin-top:10px;
    z-index:100;
}

.navtype {
    width:845px;
    height:27px;
    margin-left:130px;
    margin-top:35px;    
}

/*NAV*/

/*-------------------------------------------------*/

/*SECTIONING*/

#sectionone {
    background:url(images/sectionone.jpg) no-repeat scroll;
    height:768px;
    width:1140px;
    float:left;
}

#sectiontwo {
    background:url(images/sectiontwo.jpg) no-repeat scroll;
    height:768px;
    width:622px;
    float:left;
}

#sectionthree {
    background:url(images/sectionthree.jpg) no-repeat scroll;
    height:768px;
    width:1140px;
    float:left;
}

#sectionfour {
    background:url(images/sectionfour.jpg) no-repeat scroll;
    width:1238px;
    height:768px;
    float:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="container">
<nav><div class="navtype"><h2><a href="#sectionthree" class="scrollPage" name="about">ABOUT</a></h2><h2><a href="#sectionfive" class="scrollPage" name="films">FILMS</a></h2><h3><a href="mailto:info@staygoldfilmfestival.com">CONTACT</a></h3><h3><a href="#sectioneleven" class="scrollPage">LODGING</a></h3><h4><a href="#sectionthirteen" class="scrollPage">TICKETS</a></h4></div></nav>

<div id="sectionone">
</div>

<div id="sectiontwo">
</div>

<div id="sectionthree">
<div id="abouthead">
<div class="rule"></div>
<h1>About</h1>
<div class="rule"></div></div>
<div class="aboutbox">
</div>
<div id="abouttext"><p>The Stay Gold Movie Festival in Brooklyn, New York prides itself on bringing not only the classics when it comes to youth in revolt films, but also the spirit of the New York City life experience. The Films of The Wanderers, The Warriors, and The Outsiders are instant hits showing the comradery and friendship anyone would enjoy, not to mention the introduction of the good old "one-two" punch when it comes to taking out the pretty boys from the burbs. All in all if you want a heartfelt journey, filled with action, suspense, and good old greaer gang attitude, Stay Gold is the best for you.</p>
</div>
    </div>
</div>
</body>

Answer 1

我认为你没有正确处理锚。您的选择器只是放入href的{{1}}，我认为它不适用于jQuery。我整理了一个可行的示例jsfiddle，但我删除<a>并使用#选择器。

http://jsfiddle.net/pseudosavant/C9JSx/

Answer 2

此外，您可能想要使用单个标记，因此两个标记（html和正文）都不会捕获/执行操作。

scrollLeft javaScript水平滚动问题

2 个答案: