style switcher when clicked jumps to the top of the page

Question

I have style switcher, used php, and jquery to implement it. Now when i click on its button to open, the page jumps to the top of the page. and also when i click the same button to close the style box. the same happens it jumps to the top of the page. how to change the code to make it open without jumping.

jQuery.fn.styleSwitcher = function(){
    $(this).click(function(){
        // We're passing this element object through to the
        // loadStyleSheet function.
        loadStyleSheet(this);
        // And then we're returning false.
        return false;
    });

    function loadStyleSheet(obj) {
        $.get( obj.href+'&js',function(data){

            // Select link element in HEAD of document (#stylesheet) and change href attribute:
            $('#stylesheet').attr('href','css/' + data + '.css');

            // Check if new CSS StyleSheet has loaded:

        });
    }
}

$(document).ready(function () {
    $(".toggleDiv .expand-arrow").show();
    $(".toggleDiv .shrink-arrow").hide();

    $(".toggleDiv .expand-arrow").click(function(){
        $("#style-switcher").animate(
        {"left": "0"}, "slow");

        $("#swatchesDiv").animate(
        {"opacity": "1"}, "slow");

            $(".toggleDiv .expand-arrow").hide();
        $(".toggleDiv .shrink-arrow").show();
    }); 

    $(".toggleDiv .shrink-arrow").click(function(){
        $("#style-switcher").animate(
        {"left": "-200px"}, "slow");

        $("#swatchesDiv").animate(
        {"opacity": "0"}, "slow");

        $(".toggleDiv .expand-arrow").show();
        $(".toggleDiv .shrink-arrow").hide();
    });  
});

added a 'return false;' at the end of the click function and it did it :) — julia_jolie, Sep 10 '14 at 03:33

score 0 · Accepted Answer · answered Sep 10 '14 at 03:35

You should disable the behaviour of your links, with preventDefault or return false:

$(document).ready(function () {
    $(".toggleDiv .expand-arrow").show();
    $(".toggleDiv .shrink-arrow").hide();

    $(".toggleDiv .expand-arrow").click(function(e){
        e.preventDefault(); // disable the link
        $("#style-switcher").animate(
        {"left": "0"}, "slow");

        $("#swatchesDiv").animate(
        {"opacity": "1"}, "slow");

            $(".toggleDiv .expand-arrow").hide();
        $(".toggleDiv .shrink-arrow").show();
    }); 

    $(".toggleDiv .shrink-arrow").click(function(e){
        e.preventDefault(); // disable the link
        $("#style-switcher").animate(
        {"left": "-200px"}, "slow");

        $("#swatchesDiv").animate(
        {"opacity": "0"}, "slow");

        $(".toggleDiv .expand-arrow").show();
        $(".toggleDiv .shrink-arrow").hide();
    });  
});

style switcher when clicked jumps to the top of the page

1 Answers1