переключатель стиля при нажатии переходов вверху страницы

Question

У меня есть переключатель стилей, используемые php и jquery для его реализации. Теперь, когда я нажимаю на его кнопку, чтобы открыть, страница переместится в начало страницы. а также когда я нажимаю ту же кнопку, чтобы закрыть окно стиля. то же самое происходит при переходе в верхнюю часть страницы. как изменить код, чтобы он был открыт без прыжков.

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

Answer 1

следует отключить поведение ваших ссылок, с preventDefault или 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(); 
    }); 
});