双按钮跳转页面：一个自动滚动一个不滚动的实现方案咨询

嘿，刚好碰到过类似的需求，我来给你捋清楚怎么改！

首先得说下你现有代码的问题：你在Button2的点击函数里直接调用$('html,body').animate(...)，这时候还在第一页呢，第二页的#productReviewSide元素根本不存在，所以这个滚动逻辑完全不会生效，之后才跳转到第二页，自然看不到滚动效果。

正确的思路是通过URL参数告诉第二页是否需要滚动，然后在第二页加载完成后根据参数执行滚动操作。具体实现分两步：

第一步：修改第一页的按钮跳转逻辑 #

把两个按钮的跳转代码改成这样，给需要滚动的按钮加上URL参数：

<!-- Button1：直接跳转第二页，不带滚动标识 -->
<button id="button1" class="button" onclick="window.location.href = 'page2.html';">
  跳转不滚动
</button>

<!-- Button2：跳转时携带?scrollTo=reviews参数，告诉第二页要滚动 -->
<button id="button2" class="button" onclick="window.location.href = 'page2.html?scrollTo=reviews';">
  跳转并滚动到评论区
</button>

注意：这里的page2.html要换成你实际的第二页路径，如果是变量的话记得加引号，比如window.location.href = page2;没问题，但要确保page2是正确的URL字符串。

第二步：在第二页添加滚动判断逻辑 #

在第二页的JS代码里（确保页面加载完成后执行），检查URL参数，如果有scrollTo=reviews就执行滚动：

如果你用jQuery： #

$(document).ready(function() {
  // 解析URL参数
  const urlParams = new URLSearchParams(window.location.search);
  const scrollTarget = urlParams.get('scrollTo');
  
  // 判断是否需要滚动到评论区
  if (scrollTarget === 'reviews') {
    $('html, body').animate({
      scrollTop: $("#productReviewSide").offset().top
    }, 'slow');
  }
});

如果你想用原生JS（不需要jQuery）： #

window.addEventListener('DOMContentLoaded', function() {
  const urlParams = new URLSearchParams(window.location.search);
  const scrollTarget = urlParams.get('scrollTo');
  
  if (scrollTarget === 'reviews') {
    const targetElement = document.getElementById('productReviewSide');
    if (targetElement) {
      // 平滑滚动到目标元素
      targetElement.scrollIntoView({ behavior: 'smooth' });
    }
  }
});

为什么这个方法可行？ #

因为跳转时的URL参数会被第二页接收到，等第二页完全加载、目标元素存在后，再执行滚动逻辑，这时候就能准确找到#productReviewSide并触发滚动了。

内容的提问来源于stack exchange，提问作者Jack Barrows