文章目录

一、教程内容

需要用Jquery实现根据文章内容自动生成侧边栏导航的功能,具体的来说有以下的需求:

1、能自动生成文章h1-h5标签的标题

2、点击标题能跳转到对应的位置

3、如果文章过长,下滑后导航要保持在右侧

4、如果没有标题,需要用“无文章目录”填充目录区域。

二、具体操作

HTML

<div id="category-ct" class="global-card card-side">
        <div class="card-side-title">
            <b>文章目录</b>
        </div>
        <ul class="card-body">
            <div id="category">
                <div id="c-default" style="display:none;font-size:14px;text-align:center;color:#242424;line-height:20px;margin-top: 10px;padding-top: 5px;">
                    无文章目录
                </div>
            </div>
        </ul>
    </div>

1、自动生成文章h1-h5标题

只需要遍历文章内容,找到h1-h5的文字内容,然后加入到右侧的id="category"里面即可。

2、点击标题跳转位置

有四种方法,第四种最好。

【方法1】给锚点文本添加id,使用<a href="#">目录文字</a>来定位。

<a href="#c1">目录</a>
<h1 id="c1">需要跳转的标题</h1>

然而这样做会使得浏览器URL变为:

http://www.bewindoweb.cn/122.html#c1

并产生一条历史记录,如果多次跳转,想返回上一页面,则需要返回N次点过的锚点URL,才能返回。

【方法2】添加一个空的锚点,使用name定位,同样使用<a href="#">目录文字</a>来定位。  

<a href="#c1">目录</a>
<a name="c1"></a>
<h1>需要跳转的标题</h1>

缺点非常多,首先添加了不必要的空文本,外观会显示为一个空行(当然可以用CSS调整),其次name只对a标签起作用,最后仍然有方法1的问题。

【方法3】使用js定位。

onclick="javascript:document.getElementById('c1').scrollIntoView()"

很好,不改变URL,同时能跳转,但是比较突兀。

【方法4】使用jquery定位。

$(document).on('click', '.cbtn', function(e) {
            $('html,body').animate({scrollTop: $("#" + this.name).offset().top}, 500);
        });

将按钮加个.cbtn的class,把要跳转的id保存在name属性里,然后用animate模拟滚动条滑动跳转,平滑跳转到需要的位置。

3、如果文章过长,下滑后导航要保持在右侧

和“返回顶部”按钮的思路一致,当滚动到一定程度(看不到目录,也就是滚动距离超过了目录div离浏览器上边距的距离),就将目录的div固定在右侧。

var navH = $("#category-ct").offset().top;
        //滚动条事件
        $(window).scroll(function(){
            //获取滚动条的滑动距离
            var scroH = $(this).scrollTop();
            //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定
            if(scroH>=navH){
                $("#category-ct").css({position: 'fixed'});
                $("#category-ct").animate({top: '30px'},1000);
            }
            else{
                $("#category-ct").css({position: 'static',top:'0px'});
            }
        });

这里还加了个缓慢下降的效果,不过经常当返回顶部时,top不会变回0px,不知道为什么。

4、如果没有标题,需要用“无文章目录”填充目录区域。

如果没搜索到h1-h5,那么就将“无文章目录”的CSS置为显示即可。

三、完整代码

<script>
    $(function(){
        var notdefault = 0;
        $('.card-article-text').find('h1,h2').each(function(index,item){
            notdefault = 1;
            $(this).attr('id','c'+index);
            var headerText=$(this).text();
            var tagName=$(this)[0].tagName.toLowerCase();
            var tagIndex=parseInt(tagName.charAt(1));
            //设置不同等级header的排列及缩进样式
            if (tagIndex == 1)//href="#c'+index+'"
                $('#category').append($('<a name=c'+index+' class="cbtn article-ch'+tagIndex+'" >'+headerText+'</a>'));
            else
                $('#category').append($('<a name=c'+index+' class="cbtn article-ch'+tagIndex+'" >> '+headerText+'</a>'));

        });
        if (notdefault == 0){
            $('#c-default').css('display','block');
        }


        var navH = $("#category-ct").offset().top;
        //滚动条事件
        $(window).scroll(function(){
            //获取滚动条的滑动距离
            var scroH = $(this).scrollTop();
            //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定
            if(scroH>=navH){
                $("#category-ct").css({position: 'fixed'});
                $("#category-ct").animate({top: '30px'},1000);
            }
            else{
                $("#category-ct").css({position: 'static',top:'0px'});
            }
        });

        $(document).on('click', '.cbtn', function(e) {
            $('html,body').animate({scrollTop: $("#" + this.name).offset().top}, 500);
            //document.getElementById($(this).attr('name')).scrollIntoView()
           // onclick="javascript:document.getElementById('+'\'c3\''+').scrollIntoView()
        });

    });

</script>


转载请注明出处http://www.bewindoweb.com/143.html | 三颗豆子
分享许可方式知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议
重大发现:转载注明原文网址的同学刚买了彩票就中奖,刚写完代码就跑通,刚转身就遇到了真爱。
你可能还会喜欢
具体问题具体杠
  • ddd
    评论于2018年09月20日
    你这个博客是用什么写的啊,看到好几个类似的了
    三颗豆子
    回复于2018年09月26日
    全是自己写的哦,大概是这样: 【设计】基于卡片式的统一的风格,类似于这个网站https://www.imsxm.com,不过是我自己设计的我比较喜欢的风格 【前台页面】自己写的CSS、JS,会比较辛苦,但是只需要懂点皮毛就可以写的,可以设计自己喜欢的页面,当然bug也超级多…… 【后台页面】增删改查太多,自己写会很累,直接用国产良心前端插件layUI就行 希望能有帮助哦~