如何使用 Infinite Scroll With Django 滚动到特定元素？答案

【问题标题】：How to scroll to specific element using the Infinite Scroll With Django?如何使用 Infinite Scroll With Django 滚动到特定元素？
【发布时间】：2020-01-26 07:55:26
【问题描述】：

当我最初加载页面时，它加载了 10 个项目（1,2,3...10），向下滚动后我又得到了 10 个项目（11,12,13,...20）。但我需要直接滚动到第 12 个元素。我正在使用 Waypoint 无限滚动（JQuery）和 Django 分页。

jquery：

  $(document).ready(function() {
      $('html, body').animate({
     scrollTop: $("#2").offset().top
     }, 'slow');
  });

//航路点代码：

  var infinite = new Waypoint.Infinite({
  element: $('.infinite-container')[0],
  context: document.getElementById('#16'),
  onBeforePageLoad: function() {
  $('.loading').show();
   },
  onAfterPageLoad: function($items) {
  $('.loading').hide();
  }
  });

同时通过触发调用向下滚动来自 Django 分页的数据：

http://localhost:8000/polls/?page=2&type=testpoll

最初加载页面时，我需要滚动到“page=2”中的一个元素。我该怎么做？

【问题讨论】：

使用滚动到页面末尾的 setInterval 等待新项目加载查找元素 12，如果它发现它明确的间隔，否则继续查找。不过，那将是一个非常愚蠢的解决方案。另一个想法是搜索第 12 项，使其最终出现在您的列表顶部
@joyBlanks 我尝试使用 SetInterval 滚动。但如果没有找到第 16 个元素，它会滚动到页面底部。
这就是为什么我提到它听起来有点尴尬。你在第 2 页上显示 12 的意图是什么你怎么知道它的第 2 页。你需要问为什么如果加载并且用户想要查看第 12 页，为什么不滚动到第 2 页为什么不立即带上第 12 项？这些是您需要理顺的业务需求
@joyBlanks 元素 12 可以出现在任何页面上。
实际上你需要问正确的问题说你想看的帖子 12。你是怎么做的，你在搜索栏上搜索它，而不是通过无限滚动器来显示它。你知道我想说什么吗？

标签： jquery django infinite-scroll jquery-waypoints django-pagination

【解决方案1】：

我尝试使用 SetInterval 滚动。但如果没有找到第 16 个元素，它会滚动到页面底部。

if($("#16").length === 0){
    myVar =  setInterval(function(){ 
    $("html, body").animate({ scrollTop: 
    $(document).height()-$(window).height()});
    if($("#16").length !== 0){
        clearInterval(myVar);
        next = $(".infinite-item").parent().next().find($('#16'));
        $('html, body').animate({scrollTop: $('#16').offset().top}, 'slow');
      }
    }, 1000);

  }
});

【讨论】：