当在页面加载时异步加载所述元素时，滚动到位置哈希中给定的元素

Question

我正在使用位置哈希传递元素ID，如下所示：

https://example.com/object/id#sub-object

但是，sub-object元素列表是在页面加载后从api动态加载的。

异步请求完成后，如何将视口滚动到给定元素？鉴于页面加载时DOM的位置不可用。

Answer 1

我自己解决了这个问题，我使用jquery进行滚动动画，因为很简单。

if(window.location.hash && !this.hasScrolled){

    var hash = location.hash.substring(1);

    $('html, body').animate({scrollTop: this.$refs[hash][0].offsetTop -200} ,800);

    this.hasScrolled = true;
 }

这必须发生在组件的updated()挂钩中，因为这是元素偏移量已知的点。我添加了hasScrolled属性（最初设置为false），因此我可以确保它只在初始页面加载时滚动。