页面加载后满足特定条件时滚动到指定div的实现问题

我来帮你搞定页面加载后滚动到指定div的问题～结合你用的$stateParams（看起来是AngularJS项目），之前的方法没生效大概率是DOM还没渲染完成就执行了滚动代码，导致拿不到目标元素的正确位置。下面给你几个靠谱的实现方案：

AngularJS的视图渲染有自己的周期，直接在控制器里写滚动代码可能会早于DOM加载完成。用$timeout(fn, 0)可以确保代码在Angular的消化周期结束后执行，此时目标元素已经渲染好了：

app.controller('YourPageController', ['$scope', '$stateParams', '$timeout', 
function($scope, $stateParams, $timeout) {
  // 当存在$stateParams.year时执行滚动
  if ($stateParams.year) {
    $timeout(function() {
      const targetDiv = document.getElementById('scrollToChart');
      if (targetDiv) {
        // 滚动到div顶部，让它成为页面起始位置
        targetDiv.scrollIntoView({ block: 'start', behavior: 'auto' });
        // 让光标指向该div（给div加tabindex="-1"才能支持focus）
        targetDiv.focus();
      }
    }, 0);
  }
}]);

别忘了给你的目标div加个tabindex="-1"，不然普通div默认不能获取焦点：

<div id="scrollToChart" tabindex="-1">你的图表内容</div>

如果这个滚动需求可能在多个页面用到，写个指令会更符合Angular的设计风格：

app.directive('scrollToOnLoad', ['$stateParams', '$timeout', 
function($stateParams, $timeout) {
  return {
    link: function(scope, element) {
      if ($stateParams.year) {
        $timeout(function() {
          // 直接操作指令绑定的元素，不用再通过ID查找
          element[0].scrollIntoView({ block: 'start', behavior: 'auto' });
          element[0].focus();
        }, 0);
      }
    }
  };
}]);

然后在HTML里直接给目标div加指令就行：

<div id="scrollToChart" scroll-to-on-load tabindex="-1">你的图表内容</div>

你之前试的$(document).scrollTop($("#scrollToChart").offset().top)这类代码，大概率是执行时机太早——当代码运行时，#scrollToChart还没被渲染到DOM里，offset().top会返回undefined，自然没法正确滚动。用$timeout或者指令的方式，能确保DOM完全就绪后再执行滚动逻辑。

如果想要平滑滚动效果，只需要把scrollIntoView的behavior参数改成'smooth'就行（现代浏览器都支持）。

内容的提问来源于stack exchange，提问作者P J