Javascript 单击JS选项卡可使浏览器向上滚动

EDIT：我找到了它为什么这样做，但现在有一个问题由此产生。 向下滚动到我在底部说“编辑”的地方，以帮助我处理出现的新问题。

可在此处查看该页面：

如果您向下滚动到底部，并单击“视频”部分下面的一个选项卡，它会跳上页面。只有向下滚动，使视频位于浏览器底部上方时，才会发生这种情况

以下是我为选项卡提供的页面代码：

        <ul id="tabs" class="filter-nav option-set">
          <li><a class="selected" href="#">Acetone Test</a></li>
          <li><a href="#">Impact Test</a></li>
          <li><a href="#">Heat Test</a></li>
        </ul>
        <div id="tab-items" class="margin_top_55 textcenter">
          <hr class="dashed margin_bottom_15">
          <section>
            <div>
              <p>
                <video id="sublime" class="sublime center" poster="/resource/video/bathroom/tub-and-shower/modular/swanstone/swanstone-chemical-test.jpg" width="640" height="320" data-name="Swanstone - Chemical (Acetone) Test" data-uid="56410b5b" preload="auto">
                <source src="/resource/video/bathroom/tub-and-shower/modular/swanstone/swanstone-chemical-test.mov" />
                </video>
              </p>
              <h3>Acetone Test</h3>
              <h5 class="grey">Impervious To Chemicals</h5>
            </div>
          </section>
          <section>
            <div>
              <p>
                <video id="sublime2" class="sublime center" poster="/resource/video/bathroom/tub-and-shower/modular/swanstone/swanstone-impact-test.jpg" width="640" height="320" data-name="Swanstone - Impact Test" data-uid="12be3c75" preload="auto">
                <source src="/resource/video/bathroom/tub-and-shower/modular/swanstone/swanstone-impact-test.mov" />
                </video>
              </p>
              <h3>Impact Test</h3>
              <h5 class="grey">Impact Resistant!</h5>
            </div>
          </section>
          <section>
            <div>
              <p>
                <video id="sublime3" class="sublime center" poster="/resource/video/bathroom/tub-and-shower/modular/swanstone/swanstone-heat-test.jpg" width="640" height="320" data-name="Swanstone - Heat Test" data-uid="403140c8" preload="auto">
                <source src="/resource/video/bathroom/tub-and-shower/modular/swanstone/swanstone-heat-test.mov" />
                </video>
              </p>
              <h3>Heat Test</h3>
              <h5 class="grey">Withstands Heat!</h5>
            </div>
          </section>

它调用jquery.tools.min.js，它只是jqueryUI的“选项卡”。可在此处查看该文件：

编辑：我自己解决了这个问题，但现在有一个关于最佳方法的问题

div立即隐藏，而另一个逐渐消失，这似乎是一个问题，因此下面的代码：

{ effect: 'fade', fadeOutSpeed: 0, fadeInSpeed: 400 });

所以问题是，即使看不见，两个部分都会在.0000毫秒内看不见，但它被迫将页面向上推，那里什么都没有（如果你知道我的意思的话）

所以我可以通过将“淡出速度”从0改为1来解决这个问题，它不再这样做了，尽管它看起来有点傻。是否有更好的效果可以阻止这种情况发生？看起来好像是褪色造成了这个问题

---

谢谢大家的帮助！：）

也许这个scrollfix可以修复它

$（“.option set”）。在（“单击”，“a”，函数（e）上{
var scrollTop=$（窗口）.scrollTop（）；
$（this）.addClass（'selected'）.parent（）.sides（）.find（'a'）.removeClass（'selected'）；
$（窗口）.scrollTop（scrollTop）；
});

这是custom.js中您自己的代码：

$('.navbar a, .scroll a, .smoothscroll a').bind('click',function(event){
        var $anchor = $(this);

        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
Uncaught TypeError: Cannot read property 'top' of null (repeated 4 times)
        }, 850,'easeInOutExpo');
        /*
        if you don't want to use the easing effects:
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1000);
        */
        event.preventDefault();
    });

---

按钮是$（'.smoothscroll a'），因此您的scrollTop使其成为scroll top

我建议您只使用div或span而不是a标记。然后使用css将其样式设置为链接

示例：

myclass {
    cursor: pointer;
}

---

隐马尔可夫模型。。我试图删除整个脚本并检查页面，但仍然发生了吗？/：我在这里也做了同样的事情：唯一的区别是我遇到问题的那一个靠近页面底部。这就好像div立即隐藏，页面底部向上移动，屏幕向上移动。它必须是这种性质的，因为只有将页面缩小到页脚可以显示的程度，才能在工作页面上发生相同的事情。编辑：找出问题的原因，但现在又出现了其他问题。我修改了OP以显示新版本。请检查一下，如果您知道更好的执行方法，请告诉我，非常感谢！）是的，那就行了。我真希望我能让它淡出，而不感到紧张。淡色看起来更好/：谢谢，我想我会一直用它，直到我找到一个不会像那样出现故障的淡色。谢谢很抱歉，我没有看到您的更新。将style=“height:423px；”放在“选项卡项”div中。

myclass {
    cursor: pointer;
}