jquery将某个元素滚动到窗口中间去 jquery 滚动

据我所知，当要显示很多内容时，Web开发人员已转向老式的分页。 别误会，分页仍然是显示内容的一种非常有效的方法，但是在本文中，我们将讨论另一种选择-无限滚动。 当用户完成页面现有内容的滚动浏览时，这种技术（也称为延迟滚动或不分页）会通过Ajax加载新内容。 无限滚动被Internet上的一些知名人士使用，包括Facebook和Pinterest。 在本文中，我们将讨论构建自己的jQuery插件以实现无限滚动。

权衡

优点是显而易见的。 要获取更多内容，无需将您重定向到新页面（页面加载时倾向于将焦点转移到其他区域）。 通过实现无限滚动，您基本上可以控制用户对页面的关注！

无限滚动并非在所有情况下都有效。 例如，如果用户单击链接，然后使用浏览器的“后退”按钮，则该用户将丢失其在通过Ajax加载的数据流中的位置。 实施此功能时的一项预防措施是在新的选项卡或窗口上加载新的内容。

无限滚动的一个相关缺点是它无法保存流中的位置。 假设您想通过电子邮件与您的朋友在无限滚动页面上共享某些内容。 您无法执行此操作，因为URL将您带回到初始位置。 因此，在决定继续进行之前，请考虑一下网站的可用性。

此外，在实施无限滚动之前，请记住，它并不是非常友好的搜索引擎。 为了避免有关搜索引擎可见性的任何问题，请确保提供分页或站点地图的替代方法。

入门

我们将从布局一个非常简单的页面开始。 示例HTML和CSS的重要部分如下所示。 通过单击本教程末尾的演示链接，可以查看其余文件。

的HTML

<div id="data-container">
  <div class="data-item">
    Hi! I am the first item.
  </div>
  <div class="data-item">
    Hi! I am the second item.
  </div>
  <div class="data-item">
    Hi! I am the third item.
  </div>
  <div class="data-item">
    Ok, this is getting boring.
  </div>
  <div class="data-item">
    Let's try something new.
  </div>
  <div class="data-item">
    How about loading some more items through AJAX?
  </div>
  <div class="data-item">
    Click the button below to load more items.
  </div>
</div>
<div id="button-more" onclick="lazyload.load()">
  Load more items
</div>
<div id="loading-div">
  loading more items
</div>

的CSS

#data-container {
  margin: 10px;
}

#data-container .data-item {
  background-color: #444444;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  padding: 5px;
  margin: 5px;
  color: #fff;
}

#loading-div {
  display: none;
}

#button-more{
  cursor: pointer;
  margin: 0 auto;
  background-color: #aeaeae;
  color: #fff;
  width: 200px;
  height: 50px;
  line-height: 50px;
}

基本工作流程

如果您查看我们创建的文档，则在单击“加载更多”按钮时应加载新的帖子。 这里有几点要考虑。

• 需要对URL进行请求，该URL返回要追加到页面的新项目。
• 如果再次单击该按钮，则应重复此过程，但第二次应返回较新的帖子。
• 在以后的每个请求中都应提供新的帖子，直到没有其他帖子可以显示为止。
• 如果没有其他帖子了，您应该告诉用户他已经结束了。

阿贾克斯模式

理想情况下，您必须声明一个变量来存储页码，该变量反过来会更改将请求发送到的URL。 在我们的演示中，我们有三个这样的页面– 2.html ， 3.html和一个空4.html用于演示。

当您单击该按钮加载更多帖子时，请求需要等待一段时间才能成功加载新项目。 在这种情况下，我们将隐藏“加载”按钮，并显示一些文本，说明正在加载新项目：

$(buttonId).hide();
$(loadingId).show();

将数据追加到页面

首先，我们需要撤消在请求进行过程中执行的更改，即再次显示“加载更多”按钮并隐藏文本。 其次，我们需要将收到的响应附加到页面上已经存在的项目列表中。 请注意，在演示中，我们直接接收HTML标记以使事情简单。 您也可以发送JSON响应，添加更多变量，例如消息或状态。 附加代码如下所示。

$(buttonId).show();
$(loadingId).hide();
$(response).appendTo($(container));
page += 1;

处理数据结束

到达帖子末尾后，您需要向用户显示该页面上没有更多帖子可加载。 这可以通过许多方式来完成。 我们可以通过响应本身内嵌的代码或消息来发送状态。 但是，由于在此示例中直接使用HTML标记，因此空响应会标记流的结尾。

$.ajax({
...
  success: function(response) {
    // What to do if the response is empty
    if (response.trim() == "") {
      $(buttonId).fadeOut();
      $(loadingId).text("No more entries to load!");
      return;
    }
    // Do something if the response is right.
  },
...
});

结论

我们提出的演示本质上是非常基本的，如果付出更多努力，我们可以做得更好。 首先，我们可以完全删除按钮，并在用户向下滚动到页面末尾时调用该函数。 这将消除用户单击按钮的额外步骤，并使整个过程更快。 其次，我们可以通过JSON发送原始数据，并使用jQuery本身创建标记。 例如：

$.each(response.items, function(index, value) {
  $("<div />", {
    "class" : "data-item",
    "text" : value
  });
});

最后，JSON响应可能包含一条消息，指出请求是否正确执行，数据以及是否有更多要加载的帖子。 在这种情况下，这是发送响应的更有效方式。