горизонтальная прокрутка

Question

горизонтальная прокрутка

0

Я супер новый для jquery, и я пытаюсь создать горизонтальный прокручиваемый сайт, чтобы при нажатии ссылок на навигационной панели он прокручивал содержимое до центра окна браузера. На данный момент у меня есть прокрутка кода ниже, но он всегда позиционирует содержимое слева от экрана. Есть ли способ компенсировать это, чтобы содержание шлемов в центр?

$(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;


}

mikejm 03 нояб. 2013, в 14:24

Источник

Теги:

jquery

horizontal-scrolling

2 ответа

Ещё вопросы

Hasan Alaca · Answer 1 · 2013-11-03T12-39-00.000Z

Проверьте этот пример и попробуйте выполнить его в своем горизонтальном прокрутке

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

aksu · Answer 2 · 2013-11-03T11-47-00.000Z

Начиная с jQuery 1.7, метод.on() является предпочтительным методом привязки обработчиков событий к документу

Измените.bind() на.on() или.click().

Я не уверен на 100%, чего вы пытаетесь достичь, я нашел учебное пособие по созданию горизонтального свитка: http://gazpo.com/2012/03/horizontal-content-scroll/.

Извините за задержку с ответом. Я пытаюсь создать что-то вроде этого: jolliesbarn.co.uk страница прокручивается горизонтально при нажатии на панель навигации.