Question

EDIT: I found why it is doing this, but a question has now arisen from this.
Scroll down to where I said “edit” at the bottom to help me with the new issue that has come up.

The page can be seen here: http://www.remodeling-buffalo.com/bathroom/swanstone-bath-and-alcove-walls.php

If you scroll down to the bottom and click one of the tabs underneath the section “video” it jumps up the page. It only happens if you scroll down so the video is above the bottom of your browser.

Here is the page code that I have for the tabs:

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

and here is the JS code that I have

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

It calls out to jquery.tools.min.js which is just the “tabs” of the jqueryUI. That file can be seen here: http://www.remodeling-buffalo.com/resource/js/jquery.tools.min.js

EDIT: Fixed Issue on my own, but have a question now for best method

It seems to be a problem with the div going hidden instantly, and the other fading in, so this code right here:

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

So the issue is that even though it’s impossible to see, both sections go invisible for like .0000 MS but it is forced to push the page up there is nothing there (if you know what I mean).

So I can fix this by changing the “fadeOutSpeed” from 0 to 1, and it no longer does this, although it does look a little goofy. Is there a better effect to use which would stop this from happening? It appears as if having a fade does this problem.

Thanks for the help guys! 🙂

Answer 1

That is your own code in 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();
    });

The buttons are $(‘.smoothscroll a’), so your scrollTop makes it scroll top!