jquery ближайший якорь в поле зрения

Question

jquery ближайший якорь в поле зрения

0

Я разрабатываю сайт на одну страницу, где я хочу разрешить 2 изображения в фиксированном положении в качестве "джойстика", чтобы разрешить навигацию вверх по mouseover, я могу легко справиться с .scroll() метода jquery .scroll() и прокрутки jquery. В плагин

на странице у меня несколько якорей, я хочу иметь еще одно поведение - когда пользователь нажимает стрелку вверх или вниз, я хочу, чтобы страница прокручивалась до ближайшего якоря на странице - предыдущий якорь, когда пользователь нажимает на кнопка " вверх " и ближайший " якорь ", когда пользователь нажимает стрелку вниз.

поскольку мой скроллер установлен фиксированным, метод .closest() не работает. есть ли способ выяснить ближайшие привязки в окне просмотра?

JS FIDDLE:

http://jsfiddle.net/8vW6n/1/

любая помощь должна быть высоко оценена

sd1sd1 17 фев. 2014, в 13:05

Источник

0

Это то, что вы хотели? jsfiddle.net/dreamweiver/8vW6n/15 .
dreamweiver 17 фев. 2014, в 12:39

Теги:

jquery

html

css

2 ответа

1

    var index = 1;
    $(function () {
      $(".joystick .up").hover(function () {
       index--;
       anc = "#anchor" + index;
       if ($(anc).length) {
          $('html, body').animate({
            scrollTop: $(anc).offset().top
          }, 2000);
       } else {
          index++;
       }
    }, function () {
  });    
 $(".joystick .down").hover(function () {
    index++;
    anc = "#anchor" + index;
    if ($(anc).length) {
        $('html, body').animate({
            scrollTop: $(anc).offset().top
        }, 2000);
    } else {
        index--;
    }
}, function () {
  });
});

$("#button").click(function () {
   $('html, body').animate({
     scrollTop: $("#elementtoScrollToID").offset().top
  }, 2000);
});

JSFIDDLE:

http://jsfiddle.net/dreamweiver/8vW6n/15/

Счастливое кодирование :)

dreamweiver 17 фев. 2014, в 09:53

Ещё вопросы

Это то, что вы хотели? jsfiddle.net/dreamweiver/8vW6n/15 .

kamilkp · Accepted Answer · 2014-02-17T09-56-00.000Z

Вы могли бы попробовать что-то вроде этого:

$(".joystick .down").click(function(){
    var anchors = $('.page > a');
    var anchorPositions = [];
    anchors.each(function(ind, anch){
        anchorPositions.push(anch.getBoundingClientRect().top);
    });
    var i;
    for(i=0;i<anchorPositions.length;i++)
        if(anchorPositions[i] > 0) break;

    console.log(anchors.eq(i));
    //anchors.eq(i) is the closest anchor
});

http://jsfiddle.net/3kTHa/2/