Question

这是我的页面结构：

<div id="page1">
  <div id="page1-1">
    <a id="firstPage"></a>
  </div>
  <div id="page1-2">
    <a id="secondPage"></a>
  </div>
  <div id="page1-3">
   <a id="thirdPage"></a>
  </div>
  <div id="page1-4">
    <a id="fourthPage"></a>
  </div>   
</div>

在每个页面上都有这样的基本菜单：

<ul class="menu">
 <li><a href="#firstpage">First page</a></li>
 <li><a href="#secondPage">Second page</a></li>
 <li><a href="#thirdPage">Third page</a></li>
 <li><a href="#fourthPage">Fourth page</a></li>
</ul>

这是我的jQuery脚本：

jQuery(function() {
    jQuery('#page1 ul.menu li a').bind('click',function(event){
        var $anchor = jQuery(this);
        jQuery('#page1').stop().animate({
            scrollLeft: jQuery($anchor.attr('href')).offset().left
        }, 1000);
        event.preventDefault();
    });
});

这里开始了“有趣”的部分。如果我点击锚点它会滚动得很好：从第1页到第2页，从第1页到第3页，从第1页到第4页。当我在2号时，它不会滚动到第三个，而是滚动到第4个。如果我在第3，它将不会滚动到第4，当我点击第2时，它会滚动到第1个。如果我在4号，它总是滚动到第一个，除非我点击第4个 - 然后它滚动到第二个。

我知道它有点令人困惑，但我注意到它不会滚动到右侧的那个，除非你在第一页时，它总是滚动到第一个当你在任何其他页面除外，当你在4日，然后点击第4（然后它滚动到第2）。

我想第二天想出来，并非常感谢你的帮助。

我在Joomla平台上这样做。

Answer 1

可能问题出在jQuery('#page1').animate()上，你应该为身体设置动画。以下似乎工作正常。

＆＃13;

$(document).ready(function(){
    $('#page1 ul.menu li a').bind('click',function(event){
        var scrollTo = $($(this).attr('href')).offset().left;
        $('html, body').stop().animate({
            scrollLeft: scrollTo
        }, 1000);
        event.preventDefault();
    });
});

＆＃13;

#page1 { 
  display: flex;
  width: 400vw;
}

div > div {
  flex: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page1">
  <div id="page1-1">
    <ul class="menu">
      <li><a href="#firstPage">First page</a></li>
      <li><a href="#secondPage">Second page</a></li>
      <li><a href="#thirdPage">Third page</a></li>
      <li><a href="#fourthPage">Fourth page</a></li>
    </ul>
    <a id="firstPage"></a>
  </div>
  <div id="page1-2">
    <ul class="menu">
      <li><a href="#firstPage">First page</a></li>
      <li><a href="#secondPage">Second page</a></li>
      <li><a href="#thirdPage">Third page</a></li>
      <li><a href="#fourthPage">Fourth page</a></li>
    </ul>
    <a id="secondPage"></a>
  </div>
  <div id="page1-3">
    <ul class="menu">
      <li><a href="#firstPage">First page</a></li>
      <li><a href="#secondPage">Second page</a></li>
      <li><a href="#thirdPage">Third page</a></li>
      <li><a href="#fourthPage">Fourth page</a></li>
    </ul>
    <a id="thirdPage"></a>
  </div>
  <div id="page1-4">
    <ul class="menu">
      <li><a href="#firstPage">First page</a></li>
      <li><a href="#secondPage">Second page</a></li>
      <li><a href="#thirdPage">Third page</a></li>
      <li><a href="#fourthPage">Fourth page</a></li>
    </ul>
    <a id="fourthPage"></a>
  </div>
</div>

＆＃13;

jQuery水平滚动脚本的奇怪行为

1 个答案: