Горизонтальная прокрутка по нажатию кнопки (viewport + scrollLeft)

Question

Я уверен, что это очень простой вопрос, но даже после нескольких часов чтения через Stackoverflow/Google .. все равно не повезло.

У меня есть веб-сайт с горизонтальной прокруткой, отлично работает. Теперь я добавил две кнопки в нижней части экрана (влево/вправо).

Если посетитель нажимает кнопку «вправо», я хочу, чтобы вся страница переходила к следующему разделу, который точно равен $ (окну) .width() вправо.

Моей идеей было добавить так jquery, что при нажатии кнопки ScrollLeft: $ (window) .width() + $ (window) .ScrollLeft().

Теоретически это началось бы с первого прокрутки клика вправо, точно в ширину окна просмотра. щелчок 2/3/4 начнется с текущей позиции ScrollLeft() и еще раз добавит ширину видового экрана.

JQuery, который я использую для этого является следующее (скорее всего, это несколько раздутый, JQuery не мой strongsuit)

Я попытался определения переменных, разбить его дальше и т.д. Все безрезультатно.

 $(".right a").on("click", function(event) { 
    event.preventDefault(); 
    $("html, body").animate({ 
     scrollLeft: $(window).scrollLeft() + $(window).width() 
    }, "slow"); //Animates the scroll 
}); 
     $(".left a").on("click", function(event) { 
    event.preventDefault(); 
    $("html, body").animate({ 
     scrollLeft: $(window).scrollLeft() - $(window).width() 
    }, "slow"); //Animates the scroll 
}); 

-edit-

с просьбой здесь HTML-разметку.

Изделия внутри # horz-wrap фактически прокручиваются.

<div class="sitewrap"> 
    <div class="portfolio-wrapper"> 
     <section id="horz-wrap"> 
      <article class="post"> 
      <!--section here--> 
      </article> 
      <article class="post"> 
      <!--section here--> 
      </article> 
     </section> 
    </div> 
    <ul class="horz-nav"> 
     <li class="left"><a href="#">&#60;</a></li> 

     <li class="right"><a href="#">&#62;</a></li> 
    </ul> 

--edit 2--

По просьбе я только что загрузил страницу, концертная версия: http://lauretf35.thirtyfive.axc.nl/laurens/test.html Спасибо!

Answer 1

Вот вам необходимые изменения, вам все равно понадобится некоторое исправление, но это поможет с прокруткой.

JavaScript

$(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) { 
$('table').animate({ 
scrollTop: target.offset().top - 100 
}, 1000); 
return false; 
} 
} 
}); 
}); 

CSS:

table { 
border-collapse: collapse; 
border-spacing: 0; 
position: absolute; 
top: 200px; 
width: 100%; 
display: inline-block; 
}