学做网站培训课程介绍

当前位置:

怎么实现网站文章自动生成目录列表(锚链接)

如果网站上一篇文章比较长的情况下 ,为了方便用户浏览自己所需要的部分,可以在文章的顶部添加一个目录列表,每一个列表项都是一个锚链接,点击后直接跳到指定位置。效果如下图:

怎么实现这种文章内容自动生成目录列表呢?我们主要使用JQUERY来实现。

第一步:引入JQUERY;

第二步:在目录列表位置,添加一个空的UL;


<ul  id="toc-lists"></ul>

第三步:在主体内容最外面,放上一个ID类名:


 id="leirongdiv";

第四步:在网页最底部,放上以下的JS代码来实现自动生成列表,并且可以锚点平滑滚动;


<script>
var modian = [];
var h2lr = [];
for(var i=0;i<$('#leirongdiv h2').length;i++){
modian.push($('#leirongdiv h2:nth-of-type('+(i+1)+')').attr('id'));
h2lr.push($('#leirongdiv h2:nth-of-type('+(i+1)+')').text());
}
for(var r=0;r< modian.length;r++){
var lis = '<li><a href="#'+modian[r]+'">'+h2lr[r]+'</a></li>';
$('#toc-lists').append(lis);
}
</script>
<script type="text/javascript">
//锚点平滑滚动
$(function(){
  $('a[href*=#],area[href*=#]').click(function() {
    if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') && location.hostname == this.hostname) {
      var $target = $(this.hash);
      $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
      if ($target.length) {
        var targetOffset = $target.offset().top;
        $('html,body').animate({
          scrollTop: targetOffset
        },
        1000);
        return false;
      }
    }
  });
})
</script>

第四步:在编辑文章内容时,使用以下的标题结构;


<h2 id="div1">栏目标题栏目标题</h2>

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • WORDPRESS 网站调用评论框,我们会使用以下的函数进行直接调用:<?phpcomments_template();?>但是这个函数只能在文章页或者PAG
  • 现在很多人都在学习自己做网页,网站制作总体来说并不算难,但实际制作起来也是一个系统工程。在自己做网站之前需要了解一下网页制作流程,这样对于后
  • 有些新手不知道搭建一个网站需要哪些东西,往往摸不着头脑。下面学做网站论坛就来介绍一下搭建一个网站需要什么东西。建网站的软件和工具建一个网
  • 做网站需要学什么? (11059 次浏览)
    做网站需要学什么?先学什么?后学什么?步骤可以讲下。学什么软件讲下最好。谢谢!做网站开发需要学习下面几个知识:1.至少要会一种开发语言,如J
  • 做网站一般用什么语言 (11109 次浏览)
    老师,我想学习做网站,我在百度上查询,建网站好像要学习很多种类语言,好难的样子。请问像我这样的新手学习建网站一般要用什么建站语言呢?不需要
  • 学习网页设计需要什么软件?学习网页设计需要用到以下四大软件:1. 必学Photoshop软件既然是网页设计,那么Photoshop自然是必须要学的咯。在写代码
  • 本人想学习网页设计开发之类的,请问现在学网页设计怎么样?有前途吗?你好,如果单纯学习网页设计现在是没有什么竞争性了。建议你学习整套的网页网
  • 老师好!我是一个零基础小白,对做网站一无所知,但对于做网站非常感兴趣,也想以后能够从事这方面的工作。现在比较迷茫,不知道像我这样的零基础新
  • 我想要创一个专门写小说的网站,名字已经想好了,可以告诉我怎样做吗,做这样的小说网站需不需要软件,要不要花钱,请论坛老师给你介绍一下,谢谢!
  • 请问一下我想做一个网站,但我自己的学历比较低,文化知识有限。听说做网站还要学什么代码什么的,比较难,我怕自己学不会,像我这样的一点不会代码