水平滾動定位div

我是jquery的超級新手，我正嘗試創建一個水平滾動網站，以便當您單擊導航欄上的鏈接時，它會將內容滾動到瀏覽器窗口的中心。目前我使用下面的代碼滾動，但它始終將內容定位在屏幕左側。有沒有辦法來抵消它，所以內容飆升到中心？水平滾動定位div

$(function() { 
$('ul.nav a').bind('click',function(event){ 
    var $anchor = $(this); 

    $('html, body').stop().animate({ 
     scrollLeft: $($anchor.attr('href')).offset().left 
    }, 1000); 
    event.preventDefault(); 
});

}）;

HTML：

<div id="navbar"> 


    <ul class="nav"> 
    <li><a href="#slide1">Home</a></li> 
    <li><a href="#slide2">Parties</a></li> 
    <li><a href="#slide3">Video</a></li> 
    <li><a href="#slide4">Contact</a></li> 
</ul> 

</div> 
<div id="wrapper"> 
<div class="slide one" id="slide1"> 
</div> 
</div>

CSS：

#wrapper { 
width:16000px; 
height:552px; 

} 
.slide { 

height:552px; 
width:1000px; 
/*top: 50%;*/ 
left: 50%; 
margin-top: 100px; 
margin-left: -500px; 
position:absolute; 


} 

.one { 

background-image:url(../images/background.png); 
background-repeat: no-repeat; 


}

來源

2013-11-03 mikejm

在jQuery 1.7中，。對（）方法是用於事件處理程序安裝到

一個文件的優選方法

將.bind（）更改爲.on（）或.click（）。

我不是100％確定你想達到什麼，我找到了一個教程如何創建一個水平滾動：http://gazpo.com/2012/03/horizontal-content-scroll/。

來源

2013-11-03 13:32:02 aksu

很抱歉這麼晚纔回復。我試圖創建這樣的東西：http://jolliesbarn.co.uk/頁面點擊導航欄時水平滾動。 – mikejm

檢查這個例子，並嘗試implemet它在你的水平滾動

http://jsfiddle.net/nxcfX/

$(document).ready(function(){ 
    $("#MyList li:nth-child(1)").click(function(){ 
     $("html, body").animate({ scrollTop: 100 }, 600); 
    }); 
    $("#MyList li:nth-child(2)").click(function(){ 
     $("html, body").animate({ scrollTop: 300 }, 600); 
    }); 
    $("#MyList li:nth-child(3)").click(function(){ 
     $("html, body").animate({ scrollTop: 500 }, 600); 
    }); 
    $("#MyList li:nth-child(4)").click(function(){ 
     $("html, body").animate({ scrollTop: 900 }, 600); 
    }); 
});

來源

2013-11-03 13:54:42

水平滾動定位div

回答

相關問題