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

版权声明:本文为作者原创,转载请注明出处,联系qq:32248827 https://blog.csdn.net/dataiyangu/article/details/85041011

背景:

博主的博客希望实现能够在点击到某个文章的时候,跳转完了之后,页面能够自主的向下滚动到浏览的区域,因为博主的工作是搞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函数进行动态的滚动效果
      $("html,body").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

收获:

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

写给读者的话:

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

猜你喜欢

转载自blog.csdn.net/dataiyangu/article/details/85041011