Как я могу изменить этот шаблон, чтобы добавить кнопки, которые прокручивают к следующему разделу?

Question

Я пытаюсь создать горизонтально прокручиваемую веб-страницу. Этот шаблон использует J Query и CSS для управления шириной, но пользователю все равно нужно перетащить полосу прокрутки внизу - как бы я добавил стрелки или что-то такое, на что пользователь мог бы просто щелкнуть, и он перешел бы к следующему разделу?

http://css -tricks.com / как к Create-A-горизонтально-скроллинг-сайт /

Answer 1

Проверьте этот плагин JQuery http://plugins.jquery.com/project/ScrollTo

Answer 2

Вы можете использовать scrollLeft и offset(), чтобы определить, к чему прокручиваться:

Следующая кнопка может выглядеть следующим образом (очень близко к примеру из главы 7 jQuery Enlightenment ):

$(".next").click(function(e){
    $('html, body').animate({
        scrollLeft: $(this).closest('td').next().offset().left
    }, 1000);
    e.preventDefault();
});

Я предполагаю, что вы внимательно следили за статьей CSS-Tricks, что означает, что у вас есть table на странице.

Если вам не нужна анимация, вы можете сделать это следующим образом:

$(".next").click(function(e){
    $('html, body').scrollLeft($(this).closest('td').next().offset().left );
    e.preventDefault();
});