как передать индекс позиции в scrollTo

Question

Я реализовал localscroll / scrollto в одном из моих проектов. Со вчерашнего дня была только 1 навигация, которая пролистывала весь сайт.

Но теперь мне нужно добавить две отдельные стрелки (предыдущая / следующая), чтобы перейти к следующему или предыдущему разделу содержимого страницы.

То, что я имею на уровне jquery:

$('#menu').localScroll(800); //this is for upper menu (simple ul/li/a)


// this whole code below is for those two arrows: prev/next 
function scrollToPosition(element) {
    if (element !== undefined) {
        $("body").scrollTo(element, 800, {
            margin: true
        });
    }
}


$(function() {

    //Create an Array of section
    var section = $('#container .section');
    position = 0; //Start Position, its 0 by default and here is my problem
    var next = $('.next');
    var prev = $('.prev').hide();

    next.click(function(evt) {
        //Scroll to next position
        prev.show();
        scrollToPosition(section[position += 1]);
        if (position === section.length - 1) {
            next.hide();
        }
    });

    prev.click(function(evt) {
        //Scroll to prev position    
        next.show();
        scrollToPosition(section[position -= 1]);
        if (position === 0) {
            prev.hide();
        }
    });

});

Где вы можете увидеть позицию = 0; - это моя проблема, я хотел бы передать индекс нажатой ссылки меню.

В верхнем меню у меня как 10 ссылок. Когда я нажимаю 5th, я хотел бы, чтобы стрелки prev / next знали об этом и актуализировали позицию до 5, так что когда я прокручиваюсь до 5-го контейнера содержимого и нажимаю prev / next, он не будет начинаться с 0.

Заранее спасибо!

Answer 1

Используйте классы для отслеживания активного элемента. Затем используйте его положение смещения, чтобы прокрутить его в поле зрения. Это избавляет от необходимости глобальных переменных и других хаков. Этот код может быть немного консолидирован, но предпосылка обоснована.

http://jsfiddle.net/aVvQF/25/

$('#prev').click(function() {
    var $targetElement = $('.active').prev('.section');

    if (!$targetElement.length) {return;}
    $('.active').removeClass('active');
    $targetElement.addClass('active');

    //scroll element into view    
    $('html, body').clearQueue().animate({scrollTop: $targetElement.offset().top }, 1000);
});

$('#next').click(function() {
    var $targetElement = $('.active').next('.section');

    if (!$targetElement.length) {return;}
    $('.active').removeClass('active');
    $targetElement.addClass('active');

    //scroll element into view    
    $('html, body').clearQueue().animate({scrollTop: $targetElement.offset().top }, 1000);
});

Answer 2

Если я правильно понимаю, вы хотите, чтобы индекс пункта меню был нажат, чтобы вы могли прокрутить до того элемента, который хранится в объекте jQuery.Затем вы передадите этот элемент в функцию .scrollTo(), которая получит позицию элемента за вас.Если это так, то:

$('ul').children().bind('click', function () {
    var index = $(this).index();
    scrollToPosition(section[index]);
});

Это будет нацелено на ваш элемент меню <ul>, найти его дочерние элементы (при условии, что элементы <li> являются прямыми дочерними элементами элемента <ul>), затем связываетОбработчик события click для элементов <li> для получения индекса элемента, по которому щелкнули (это проще сделать с элементами <li> вместо элементов <a>, поскольку все элементы <li> находятся на одном уровнеDOM; все они братья и сестры).

Вот документация для .index(): http://api.jquery.com/index

Также вы должны поставить оператор var перед вашим position объявление переменной, поэтому это не глобальная переменная (она все равно будет доступна из обработчика событий document.ready, единственной части вашего кода, которая обращается к этой информации):

$ (function () {

//Create an Array of section
var section  = $('#container .section'),
    position = 0, //Start Position, its 0 by default and here is my problem
    next     = $('.next'),
    prev     = $('.prev').hide();

Обратите внимание, что объявления переменных разделены запятыми, которые добавят их все в текущую область.

Answer 3

Попробуйте это.

//Store the index when clicked on any menu
$('#menu li').click(function(){
    $(this).parent().data("menuindex", $(this).index());
});

//Here you can use that index to determine the position
next.click(function(evt) {
    position = ($('#menu').data('menuindex') || 0)
    //Scroll to next position
    prev.show();
    scrollToPosition(section[position += 1]);
    if (position === section.length - 1) {
        next.hide();
    }
});

prev.click(function(evt) {
    position = ($('#menu').data('menuindex') || 0)
    //Scroll to prev position    
    next.show();
    scrollToPosition(section[position -= 1]);
    if (position === 0) {
        prev.hide();
    }
});

Answer 4

Установите глобальную переменную и свяжите функцию onClick с вашими 10 ссылками, которые обновляют значение этой глобальной переменной.Затем установите position = 0 и посмотрите на глобальную переменную во время выполнения, чтобы установить позицию;

 var position = 0;

 function setPosition( linkID ){
        if (linkID !== undefined) {
             if (linkID < 11) { //Or whatever other varchecking
                 position = linkID;
             }
         }
  }

  $(function() {

  //Create an Array of section
  var section = $('#container .section');
  //Position is already set here
  } 
  </script>


  <a href='#link1' onClick='setPosition(1);'>Do Stuff!</a>

Вы можете переупорядочить ее / делать другие вещи, но это быстро и грязно