0

編集：なぜこれを行っているのかわかりましたが、これから疑問が生じました。一番下の「編集」と言ったところまでスクロールして、発生した新しい問題を解決してください。

ページはここで見ることができます: http://www.remodeling-buffalo.com/bathroom/swanstone-bath-and-alcove-walls.php

一番下までスクロールして、「ビデオ」セクションの下にあるタブの 1 つをクリックすると、ページがジャンプします。下にスクロールして、ビデオがブラウザの下部より上にある場合にのみ発生します。

タブ用に持っているページコードは次のとおりです。

        <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'); }); 
});

jqueryUI の単なる「タブ」である jquery.tools.min.js を呼び出します。そのファイルはここで見ることができます: http://www.remodeling-buffalo.com/resource/js/jquery.tools.min.js

編集：自分で問題を修正しましたが、最善の方法について今すぐ質問があります

div がすぐに非表示になり、他のものがフェードインするのは問題のようです。したがって、このコードは次のとおりです。

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

したがって、問題は、見ることは不可能ですが、両方のセクションが.0000 MSのように見えなくなりますが、ページを押し上げることを余儀なくされ、そこには何もありません(私の言いたいことがわかっている場合)。

したがって、「fadeOutSpeed」を 0 から 1 に変更することでこれを修正できます。これが起こらないようにするために使用するより良い効果はありますか? フェードがこの問題を解決しているように見えます。

助けてくれてありがとう！:)

4

3 に答える 3

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 を使用すると上にスクロールします!

于 2012-08-12T23:02:04.823 に答える
0

たぶん、このスクロールフィックスで修正できますか？

$(".option-set").on("click", "a", function(e) {
    var scrollTop = $(window).scrollTop();
    $(this).addClass('selected').parent().siblings().find("a").removeClass('selected');
    $(window).scrollTop(scrollTop);
});
于 2012-08-12T23:01:58.500 に答える
0

タグの代わりに div または span を使用することをお勧めします。次に、css を使用して、リンクのようにスタイルを設定します。

例：

myclass {
    cursor: pointer;
}
于 2012-08-12T23:10:02.480 に答える