githubPages平滑锚点scroll

少于 1 分钟读完

githubPages平滑锚点scroll

常用mac工具

修改default.html

page.scrollgrace是post文件加的,对于特殊链接会跳转,所以需要平滑滚动到锚点
步骤一 去掉href为空 增加属性 href1 步骤二 对li 下的 a点击需要处理 主要是用animate方法

    {% if page.scrollgrace==true %}
      <script type="text/javascript" src="{{ '/verify-master/js/jquery.min.js' | relative_url }}" ></script>
      <script>
         var aTags = document.querySelectorAll('.toc__menu  a')
         for (var i = 0; i < aTags.length; i++) {
           aTags[i].setAttribute('href1',aTags[i].getAttribute("href"));
           aTags[i].setAttribute('href','');
         }
        function goToEle(e) {
          
            var href = $(this).attr("href1");
             var pos = $(href).offset().top;
             
             $("html,body").animate({scrollTop: pos}, 500); 
             return false;
           }

        $(document).on("click",".toc__menu li a",goToEle);
    </script>
    {%endif%}

评论