Question

编辑：我发现为什么会这样做，但现在出现了一个问题。向下滚动到我在底部说“编辑”的位置，以帮助我解决已出现的新问题。

此处可以看到该页面：http://www.remodeling-buffalo.com/bathroom/swanstone-bath-and-alcove-walls.php

如果向下滚动到底部并单击“视频”部分下方的其中一个标签，它会向上跳转页面。只有当您向下滚动以便视频位于浏览器底部时才会发生。

以下是我对标签页面的代码：

        <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>

这是我的JS代码

$(function() { 
    $("#tabs").tabs("#tab-items section", { effect: 'fade', fadeOutSpeed: 0, fadeInSpeed: 400 }); 
    $(".option-set").on("click", "a", function(e) { 
    $(this).addClass('selected') .parent().siblings().find("a").removeClass('selected'); }); 
});

它调用jquery.tools.min.js，它只是jqueryUI的“tabs”。该文件可在此处查看：http://www.remodeling-buffalo.com/resource/js/jquery.tools.min.js

编辑：修复了我自己的问题，但现在有一个问题是最好的方法

这似乎是一个问题，div立即隐藏，而另一个渐渐消失，所以这个代码就在这里：

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

所以问题在于，尽管不可能看到，但是这两个部分对于像.0000 MS一样是不可见的，但是它被迫向上推动那里没有任何东西（如果你知道我的意思）。

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

感谢帮帮！：）

Answer 1

这是您在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让它滚动顶部！

Answer 2

也许这个scrolllfix可以解决它？

$(".option-set").on("click", "a", function(e) {
    var scrollTop = $(window).scrollTop();
    $(this).addClass('selected').parent().siblings().find("a").removeClass('selected');
    $(window).scrollTop(scrollTop);
});

Answer 3

我建议你只使用div或span而不是标签。然后使用css将其设计为看起来像一个链接。

示例：

myclass { cursor: pointer; }

单击JS选项卡会导致浏览器向上滚动

3 个答案: