CODEWITHSUNDEEP
javascript
efficient
efficient

Reputation: 93

Clicking JS Tabs Causes Browser to Scroll Up

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! :)

Upvotes: 0

Views: 1268

Answers (3)

jlonganecker
jlonganecker

Reputation: 1198

I would suggest you just use divs or spans instead of a tags. Then just use css to style it to look like a link.

Example:

myclass {
    cursor: pointer;
}

Upvotes: 0

GordonZ
GordonZ

Reputation: 374

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!

Upvotes: 1

Stano
Stano

Reputation: 8949

Maybe this scrollfix can fix it?

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

Upvotes: 0

Related Questions