解决jquery.pjax加载后的异常滚动

个人博客地址:http://www.wenhaofan.com/article/20181106154356

在使用jquery.pjax的时候发现每次加载完成后都会将滚动条滚动至顶部，用户体验极不友好，但是pjax实际上是用的异步加载html，浏览器也不会对点击事件进行操作，于是猜测是在代码中操作了滚动条，于是全局搜索

scrollTop

找到了以下代码

   if (hash) {

      var name = decodeURIComponent(hash.slice(1))

      var target = document.getElementById(name) || document.getElementsByName(name)[0]

      if (target) scrollTo = $(target).offset().top

    }

    if (typeof scrollTo == 'number') $(window).scrollTop(scrollTo)

该代码在340行左右，在这里我们可以看见pjax在加载完成后会检查url hash是否为空，如果为空则获取锚点，然后滚动到锚点所在的位置，但是当url hash为空的时候，scrollTo值也依然为0,于是就直接将滚动条滚动到了顶部，这就非常蛋疼了，一般情况下在异步加载完成后我们并不需要滚动条滚动至顶部，所以这个操作异常bug，极其影响体验。

解决方法也很简单，仅需将 if (typeof scrollTo == 'number') $(window).scrollTop(scrollTo)移动至if代码块中，让它仅在设置锚点时操作滚动条。

巴特西

解决jquery.pjax加载后的异常滚动

最新文章

热门文章