加載鏈接中心jquery

Question

我的問題是關於水平滾動1頁的網站。我使用jQuery進行滾動。當您點擊導航菜單中的鏈接時，您會轉到該部分，但它完全顯示在屏幕的右側。

我很新的jQuery，我想在屏幕中心的鏈接部分。現在有人如何做到這一點？

這裏是我使用的代碼：

$(function() { 
$('a[href*=#]:not([href=#])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     $('html,body').animate({ 
      scrollLeft: target.offset().left 
     }, 1000); 
       return false; 
     } 
    }  
    }); 
}); 

Answer 1

這更是一個CSS問題，您還可以通過使用CSS3過渡實現更高效的滾動。因此，不是使用jQuery的動畫函數，而是使用jQuery設置CSS left屬性，並設置CSS以使該元素動畫。關於居中，你需要一個元素（例如一個div）作爲你的面具的寬度，溢出隱藏，相對位置和邊距：0 auto;在CSS中設置它。然後你的內部元素就是你的滑塊，並且是你將位置絕對和CSS轉換一起設置左邊屬性的元素。這裏是一個例子：http://jsfiddle.net/q255npgr/1/

.item { 
    width: 48px; 
    height: 48px; 
    border: 1px solid red; 
    background: black; 
    float: left; 
    color: #FFF; 
} 
#mask { 
    width: 70px; 
    height: 50px; 
    position: relative; 
    overflow: hidden; 
} 
#slider { 
    top: 0; 
    left: 0; 
    position: absolute; 
    transition: 1s left; 
    width: 30000px; 
    height: 50px; 
} 


var posish = 0; 

$('#right').click(function(){ 
    $('#slider').css('left', posish -= 50); 
}); 
$('#left').click(function(){ 
    $('#slider').css('left', posish += 50); 
}); 


<div id="mask"> 
    <div id="slider"> 
     <div class="item">a</div> 
     <div class="item">b</div> 
     <div class="item">c</div> 
    </div> 
</div> 
<button id="left"><</button> 
<button id="right">></button>