前端页面向下滑动时跳转到另一个页面

Question

前端页面向下滑动时跳转到另一个页面，滑动到另一个页面时，往上滑动，在返回上一个页面

Answer 1

引自免费微信小程序：皆我百晓生

要实现这个功能，可以监听滚动事件，并在满足向下滚动到一定位置的条件下进行页面跳转。同样地，为返回上一个页面时能通过向上滑动实现，可以在目标页面添加类似的滚动监听逻辑。

以下是一个基本的基于jQuery的示例代码：

$(window).scroll(function() {
  // 获取当前滚动位置
  var scrollTop = $(this).scrollTop();

  // 检查是否滑动到底部（这里假设距离底部100px时触发跳转）
  if ($(document).height() - scrollTop === $(window).height() + 100) {
    window.location.href = "另一个页面的URL";
  }
});

// 在目标页面顶部添加类似的向上滑动监听事件
$(window).scroll(function() {
  // 获取当前滚动位置
  var scrollTop = $(this).scrollTop();

  // 当用户向上滑动且在顶部附近时（比如滑动距离小于等于100px）
  if (scrollTop <= 100) {
    history.back(); // 返回上一个页面
  }
});

注意：以上示例代码仅提供一种实现思路，实际应用中可能需要根据你的项目具体情况进行调整，如使用原生JavaScript或其它前端框架（如React、Vue等）来实现类似功能。

另外，请确保你已在项目中正确引入了jQuery库，如果没有引入，你需要先引入jQuery才能使用上述代码。对于现代浏览器和框架，也可以采用Intersection Observer API或者更先进的路由管理方式来优化这个交互体验。