單擊圖庫中的鏈接會導致頁面跳轉？

Question

請原諒措辭不好的標題，希望我能在這裏解釋這個問題。

我已經在jQuery中編寫了一個簡單的圖庫控件，有六個圖像和兩個按鈕控件，允許用戶循環瀏覽圖像的總集合。我有這部分工作正常，但每當我點擊一個按鈕來移動集合頁'跳/滾動'自動到頁面的頂部？我試着給畫廊容器固定高度，因爲我有這之前，我設法解決這樣類似的問題，但是這並沒有幫助：

這裏是jQuery的：

var index = 0; 
$(function() { 
    $('#btnLeft').click(function() { 
     if (index != 0) { 
      index--; 
      $('#sixth').attr('src', $('#fifth').attr('src')); 
      $('#fifth').attr('src', $('#fourth').attr('src')); 
      $('#fourth').attr('src', $('#third').attr('src')); 
      $('#third').attr('src', $('#second').attr('src')); 
      $('#second').attr('src', $('#first').attr('src')); 
      $('#first').attr('src', '/Content/Images/Gallery/Thumbs/' + parseInt(index + 1) + '.png'); 
     } 
    }); 

    $('#btnRight').click(function() { 
     if (parseInt(6 + index) != 10) { 
      index++; 
      $('#first').attr('src', $('#second').attr('src')); 
      $('#second').attr('src', $('#third').attr('src')); 
      $('#third').attr('src', $('#fourth').attr('src')); 
      $('#fourth').attr('src', $('#fifth').attr('src')); 
      $('#fifth').attr('src', $('#sixth').attr('src')); 
      $('#sixth').attr('src', '/Content/Images/Gallery/Thumbs/' + parseInt(6 + index) + '.png'); 
     } 
    }); 
}); 

這裏加價：

<div id="gallerySlider" style="height: 160px;"> 
    <img id="first" src="/Content/Images/Gallery/Thumbs/1.png" alt="Image" width="160" height="160" style="float:left;" /> 
    <img id="second" src="/Content/Images/Gallery/Thumbs/2.png" alt="Image" width="160" height="160" style="float:left;" /> 
    <img id="third" src="/Content/Images/Gallery/Thumbs/3.png" alt="Image" width="160" height="160" style="float:left;" /> 
    <img id="fourth" src="/Content/Images/Gallery/Thumbs/4.png" alt="Image" width="160" height="160" style="float:left;" /> 
    <img id="fifth" src="/Content/Images/Gallery/Thumbs/5.png" alt="Image" width="160" height="160" style="float:left;" /> 
    <img id="sixth" src="/Content/Images/Gallery/Thumbs/6.png" alt="Image" width="160" height="160" style="float:left;" /> 

    <a id="btnLeft" style="position:relative; float:left; bottom:105px;" href="#"><img src="/Content/Images/Design/leftbutton.png" alt="Left Button" /></a> 
    <a id="btnRight" href="#" style="position:relative; float:right; bottom:105px;"><img src="/Content/Images/Design/rightbutton.png" alt="Right Button" /></a> 
</div> 

任何人都可以提供建議嗎？

感謝

Answer 1

使用.preventDefault()像以下停止瀏覽器默認加載和跳躍：

$('#btnLeft').click(function (e) { 

     e.preventDefault(); 

     if (index != 0) { 
      index--; 
      $('#sixth').attr('src', $('#fifth').attr('src')); 
      $('#fifth').attr('src', $('#fourth').attr('src')); 
      $('#fourth').attr('src', $('#third').attr('src')); 
      $('#third').attr('src', $('#second').attr('src')); 
      $('#second').attr('src', $('#first').attr('src')); 
      $('#first').attr('src', '/Content/Images/Gallery/Thumbs/' + parseInt(index + 1) + '.png'); 
     } 
    }); 

    $('#btnRight').click(function (e) { 

     e.preventDefault(); 

     if (parseInt(6 + index) != 10) { 
      index++; 
      $('#first').attr('src', $('#second').attr('src')); 
      $('#second').attr('src', $('#third').attr('src')); 
      $('#third').attr('src', $('#fourth').attr('src')); 
      $('#fourth').attr('src', $('#fifth').attr('src')); 
      $('#fifth').attr('src', $('#sixth').attr('src')); 
      $('#sixth').attr('src', '/Content/Images/Gallery/Thumbs/' + parseInt(6 + index) + '.png'); 
     } 
    });