从当前位置滚动到下一个div

时间:2015-09-24 14:41:09

标签: jquery html css scroll

在我目前使用div滚动到另一个div的解决方案中,我同时支持previousnext

这可以通过保存最后滚动到的div的索引来确定下一步滚动到哪里。但是,当用户使用滚轮滚动时,这会中断。我想知道是否有办法计算哪个div最靠近窗口顶部,然后确定要滚动到下一个的索引。

这反过来会消除我遇到的问题。

使用我当前的解决方案测试错误:

  1. 转到jsfiddle链接
  2. 单击向下箭头两次。它应该从一个div滚动到下一个div。
  3. 接下来,使用鼠标滚轮向下滚动页面的3/4。
  4. 现在再次点击向下箭头。你会看到它会把你带回到你最后离开的地方。
  5. http://jsfiddle.net/JokerMartini/yj9pvz2a/1/

    var curr_el_index = 0;
    var els_length = $(".section").length;
    
        $('.btnNext').click(function () {
            curr_el_index++;
            if (curr_el_index >= els_length) curr_el_index = 0;
            $("html, body").animate({
                scrollTop: $(".section").eq(curr_el_index).offset().top - 20
            }, 700);
        });
    
        $('.btnPrev').click(function () {
            curr_el_index--;
            if (curr_el_index < 0) curr_el_index = els_length - 1;
            $("html, body").animate({
                scrollTop: $(".section").eq(curr_el_index).offset().top - 20
            }, 700);
        });
    

    解决方案已更新: http://jsfiddle.net/JokerMartini/82wo9e3c/1/

3 个答案:

答案 0 :(得分:1)

您可以使用jquery offset(http://api.jquery.com/offset/)检索元素相对于文档的当前偏移量。所以你可以使用这样的东西:

function getTopElement(elements){
  var topEl;
  $.each(elements, function(index,el){
    if(!topEl || topEl.offset().top < el.offset().top){
      topEl = el;
    }
 });

  return topEl;
}

答案 1 :(得分:1)

根据 this answer, 有一种方法可以计算div与视口顶部之间的距离,具体如下:

($element.offset().top - $(window).scrollTop())

所以,你必须找到一个具有最小正值的那个:

var closest_to_top = $('.section').toArray().reduce(function(curr, section) {
    var bottom = $(section).offset().top + $(section).height()
    var distance = (bottom - $(window).scrollTop())
    if (distance < 0) return curr
    return distance > curr.distance ? curr : {
        distance : distance,
        section : section
    }
}, {section:null, distance:+Infinity}).section

这是底部位于视口顶部下方的最高部分。如果需要部分顶部,请删除+$(section).height()

答案 2 :(得分:0)

尝试添加此项来处理页面滚动。演示:http://jsfiddle.net/yj9pvz2a/2/

var section_height = $(".section").height() + 80; //80 margins

$(window).on('scroll', function() {
    curr_el_index = Math.floor($(window).scrollTop() / section_height);
});

解释:所以您在代码中遇到的问题是,当用户不使用导航滚动到不同的部分时,curr_el_index保持不变。此$(window).scroll()功能会考虑滚动而不是导航按钮。

功能:在滚动按钮时,它取窗口的滚动高度并将其除以该部分的滚动高度,并将其向下舍入到最接近的整数,并将当前索引部分设置为该数字。 / p>