JQuery scrollTo но замедлится

Question

между ними, я использую простой кусок кода (на основе из «ScrollTo Posts with jQuery», который позволяет нажать на следующую/предыдущую ссылку, и он будет прыгать до верхней части каждого сообщения.

У меня есть структура HTML, так что это сообщение post> image> post> image и т. Д.

Мне интересно, возможно ли, что если вы нажмете следующую/предыдущую кнопку, она будет прокручиваться до следующего сообщения как обычно, но это висит/парит над изображениями/div inbetween? Итак, он в конечном итоге завершает его прокрутку, но замедляется по divs между ними.

Вот мой код jQuery:

$(function() { 
    function a(f) { 
     var b, e, c = [], 
      d = $(window).scrollTop(), 
      g = $('.section-slide'); 
     g.each(function() { 
      c.push(parseInt($(this).offset()['top'], 10)) 
     }); 
     for (e = 0; e < c.length; e++) { 
      if (f == 'next' && c[e] > d) { 
       b = g.get(e); 
       break 
      } 
      if (f == 'prev' && e > 0 && c[e] >= d) { 
       b = g.get(e - 1); 
       break 
      } 
     } 
     if (b) { 
      $.scrollTo(b, { 
       duration: 1400 
      }) 
     } 
     return false 
    } 
    $('#next,#prev').click(function() { 
     return a($(this).attr('id')) 
    }); 
    $('.scrolltoanchor').click(function() { 
     $.scrollTo($($(this).attr('href')), { 
      duration: 1400 
     }); 
     return false 
    }) 
}); 

Answer 1

Если предположить, что структура будет оставаться статичным: пост -> изображение -> запись -> изображение и т.д. Вы можете сделать это, находя предыдущее/следующее изображение на пост вы будете прокруткой, и прокрутка к нему первый, а затем использовать onAfter обратный вызов/установку из $.scrollTo плагина стрелять вторичные прокрутки после предопределенного setTimeout как это:

$(function() { 
    function scroll(direction) { 
     var scroll, scrollImage, i, 
      positions = [], 
      here = $(window).scrollTop(), 
      collection = $('.post'); 

     collection.each(function() { 
      positions.push(parseInt($(this).offset()['top'], 10)); 
     }); 

     for (i = 0; i < positions.length; i++) { 
      if (direction == 'next' && positions[i] > here) { 
       scroll = collection.get(i); 

       // Find Image Before Post 
       scrollImage = $(scroll).prev('.image').get(0); 

       break; 
      } 
      if (direction == 'prev' && i > 0 && positions[i] >= here) { 
       scroll = collection.get(i - 1); 

       // Find Image After Post 
       scrollImage = $(scroll).next('.image').get(0); 

       break; 
      } 
     } 

     if (scroll) { 
      // Check if Scroll Image Exists 
      if (scrollImage){ 
       // Scroll with Image Delay 
       $.scrollTo(scrollImage, { 
        duration: 750, 
        onAfter: function(){ 
         setTimeout(function(){ 
          $.scrollTo(scroll, { 
           duration: 750 
          }); 
         }, 1000); // Change the Delay to Increase/Decrease the Hover 
        } 
       });     
      } else { 
       $.scrollTo(scroll, { 
        duration: 750 
       }); 
      } 
     } 

     return false; 
    } 

    $("#next,#prev").click(function() { 
     return scroll($(this).attr('id')); 
    }); 

    $(".scrolltoanchor").click(function() { 
     $.scrollTo($($(this).attr("href")), { 
      duration: 750 
     }); 
     return false; 
    }); 
}); 

Вы можете найти обновленную скрипку здесь: http://jsfiddle.net/hfg2v/2/

Надеюсь, это поможет.

Answer 2

Это происходит потому, что вы используете библиотеку прокрутки parallax (Stellar.js), которая заставляет разные элементы прокручиваться с разной скоростью.

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

Edit:

К сожалению, что-то придумал, когда я писал свой ответ, и у меня не было времени, чтобы закончить код.

Однако, работая над этим в течение некоторого времени, я начинаю думать, что мое предлагаемое решение не сработает. Я что-то вдоль этих линий мышления:

$(window).scrollTo(640, {onAfter: function() { 
    var scrollRatio = 3; 
    var distance = 855 - 640; 

    $(window).scrollTo(855, { 
     easing: 'linear', 
     duration: distance * scrollRatio/speed, 
     onAfter: function() { 
      var scrollRatio = 1; 
      var distance = 1200 - 855; 
      $(window).scrollTo(1200, { 
       easing: 'linear', 
       duration: distance * scrollRatio/speed, 
       onAfter: function() { 
        var scrollRatio = 3; 
        var distance = 1280 - 1200; 
        $(window).scrollTo(1280, { 
         easing: 'linear', 
         duration: distance * scrollRatio/speed 
        }); 
       } 
      }); 
     } 
    }); 
}}); 

Если вставить предыдущий код в веб-сайте, представленной в этом вопросе (http://dev.du.st/field-station/), вы будете приняты на первый элемент, и он будет пытаться прокрутить вас следующий с использованием метода, который я описал. Я жестко закодировал значения смещения, потому что я все еще экспериментировал с ним. Тем не менее, я не думаю, что этот подход будет работать, поскольку он все еще чувствует. Это связано с тем, что изменение мгновенной скорости в середине анимации всегда будет заметным.

Прямо сейчас, я думаю, что лучший способ смягчить медленную прокрутку, вызвавшую прокрутку параллакса, заключается в использовании другой функции ослабления. В конце концов, делая фоновый снимок медленнее, это именно то, что вы используете для прокрутки параллакса.

Следующий код, когда побежал в свой веб-сайт, будет делать все анимации использовать «easeOutCirc» для их ослабления функции по умолчанию, после некоторого экспериментирования, я нашел, что это тот, который делает скроллинг чувствовать себя не менее странным:

// Add the jQuery-easing plugin, needed for the more sophisticated easing functions. 
$.getScript('//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'); 

// Set easeOutCirc as the default easing. 
jQuery.easing.def = 'easeOutCirc'; 

вы можете найти более функции замедления в this website

После того, как вы закончите экспериментировать, если вы решили на использовании смягчении (вы можете использовать разные для прокрутки вверх и вниз), то вы, вероятно, следует держать по умолчанию, как есть, и просто измените ослабление в анимации прокрутки, добавив {easing: EASING_NAME} к вашим параметрам хэш в функции scrollTo. Таким образом, ваш код будет выглядеть примерно так:

$.scrollTo($($(this).attr("href")), { 
    duration: 750, 
    easing: 'easeOutCirc' 
});