hexo next 主题 : 实现点击跳转到文章的时候文章的页面自动实现滚轮效果，向下滚动到阅读的位置。

个人博客：https://mmmmmm.me

源码：https://github.com/dataiyangu/dataiyangu.github.io

背景：

博主的博客希望实现能够在点击到某个文章的时候，跳转完了之后，页面能够自主的向下滚动到浏览的区域，因为博主的工作是搞java的，js方面在大一大二的时候搞过，有些东西忘记了，或者还没有接触到，有技术的盲区（可能对于阅读这篇文章的你来说有些可笑~），不管那么多，记录下来，以便以后维护。

上代码：

  function article_top(){
   //判断本次页面是否是文章，在我的hexo中，文章的页面是html的地址，是经过设置的，如果是初始的话，我记得好像是md结尾的，这里读者自行设置。
   //console.log(window.location.pathname)
	//打印出来的结果是http://localhost:4000/dayuhaitang.html中的dayuhaitang.html
    var pathname = window.location.pathname
    //获取我的头部的高度，下面会用到
    var height = $(".header").css("height");
    //判断是否是文章的页面
    if (pathname.indexOf("html")>0) {
	//使用animate函数进行动态的滚动效果
	//2018.12.7进行修改，将下面的$("html,body")改为了$("html,article")，因为页面中有fixed的div，会影响到他们~
      $("html,article").animate({scrollTop:height},500)
    }
  }
  //给滚动效果的函数设定timeout函数，这个函数有很大的作用，在下面我会详细的讲解。
  setTimeout(article_top,800);

这个简单的函数中遇到的问题：

判断是否是文章的页面

var pathname = window.location.pathname

这个不难google一下就出来了，主要是想到通过什么来判断

滚动函数

$("html,body").animate({scrollTop:height},500)

这个函数我查了好久，浏览w3c等网站均未实现。

最后通过这篇文章实现了：http://caibaojian.com/jquery-scrollto.html

感谢！

问题：需要在body前面加heml，就是一个父类吧

实现滚动后，滚动条会不断的上下跳动，页面闪烁。

背景：

这个问题，调试了一下午，聪明的我一定也想到了，在我的next主题中一定设置了（官方自己设置的）如果是文章页面会自动滚动到顶部，而我的hexo next中加入了require函数，以便实现提升加载速度，因为require是异步加载的，所以我的函数和系统预置的函数会出现执行顺序抢夺的问题，就会出现似上非上，似下非下的不断跳动闪烁的情况，有时候出现有时候不出现，虽然只是很短的时间，但是对于页面的效果有不小的影响。

我试图阅读源码，修改官方的函数，但是发现真的找不到，包括从页面打断点调试，能力有限好吧。

上百度，上google，发现有类似的问题。博文地址：https://blog.csdn.net/cen_cs/article/details/79018061 ， 当然并并没有很好的解决我的问题，但是有不小的启发，因为timeout在js和jq中实现的方式是不一样的。

通过阅读相关的文档，对于timeout函数有了一定的理解：就是在等待了设定的指定时间后在执行自己的函数

对于timeout的规范写法参考的文章:https://blog.csdn.net/qq_39098813/article/details/80746465

收获：

通过以上的分析，如果读者读到了这里，（如果是和我一样的小白的话）相信您一定或多或少有一定的收获吧。

写给读者的话：

如果读者发现了代码中有错误的地方，（虽然只有几行），请您一定及时的联系我，大家共同进步！