JS带自动滚动条的导航栏特效

先上效果图，在点击栏目后导航条会带有自动滚动到中间的特效。

流程说明

如果单个栏目超过屏幕中间位置。那么滚动条就会自动居中到中间的位置。如果是最后几个栏目则不会发生变化。

代码因为是根据自身网站所设计，会有一些多余的代码可以删除。

HTML代码

全部小程序h5家居百货政府机构企业官网

JS部分的代码

$("#box").attr("style", "min-height:" + ($(window).height()-250) + "px")



        Let my = {
            option: {},
            Ajax() {
                $("#loding").html(loading.h0);
                setTimeout(() => {
                    ajax.get("/Api/TemplateDetails/", my.option).then(res => {
                        if (res.state == 200) {

                            let db = res.data;

                            let code = "";

                            db.forEach((e) => {
                                code += '';
                                code += '';
                                code += '' + e.title + '|' + my.getlistname(e.list) + '';
                                code += '' + e.content + '    ';
                            })

                            $("#obj").Append(code);
                            my.option.id = db[db.length - 1].id;
                            $("#loding").html("")
                            my.set.kg = 0;
                        }

                        if (res.state == 204) {
                            $("#loding").html(loading.h1)
                        }

                    }).catch(res => {
                        $("#loding").html(loading.h3)
                        my.set.kg = 0;
                    })


                }, 500)

            },
            set: {
                kg: 0
            },
            db: "",
            csh() {
                $("#obj").html("");
                my.option = {};
                my.set.kg = 0;
                $("#sid").val(0);
                $("#slist").val(0)
            },
            setid() {
                let sid = parseInt($("#sid").val());
                if (sid > 0) {
                    my.option.id = sid;
                }
            },
            setlist() {
                let slist = parseInt($("#slist").val());

                if (slist > 0) {
                    my.option.list = slist;
                }
            },
            list: JSON.parse($("#mylist").val()),
            getlistname(e) {

                let name = "";

                for (let i in my.list) {
                    if (my.list[i].id == e) {
                        return my.list[i].name;
                    }
                }

                return name;

            }
        }
        my.setid();
        my.setlist();
        $(window).scroll(function () {
            if ($(this).scrollTop() + $(this).height() >= ($(document).height() - 100)) {

                if (my.set.kg == 0) {
                    my.set.kg = 1;
                    my.ajax();
                }

            }
        });







        let s = $("#template_nav li").eq(0).width();
        $("#line").attr("style", "width: " + s + "px;");
        //$("#loding").html(loading.h0)
        $(shownav.li).click(function () {
            shownav.show(this);
            $(shownav.li).removeClass();
            $(this).addClass("active");
            my.csh();
            $("#slist").val($(this).attr("data-id"));
            my.setlist();
            my.ajax();
        })

CSS部分代码

.template_icon {
            height: 2rem;
            overflow: hidden;
            border-radius: 0.1rem;
        }

            .template_icon img {
                width: 100%;
            }

        .template_list_title {
            padding: 0.2rem 0;
        }

            .template_list_title dd {
                color: #333333;
                font-size: 0.2rem;
                line-height: 0.28rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .template_list_title a {
                color: #333333;
                white-space: nowrap;
            }

            .template_list_title dd span {
                font-size: 0.16rem;
            }

            .template_list_title dt {
                color: #999999;
                font-size: 0.13rem;
                margin-top: 0.05rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

        .template_nav {
            width: 100%;
            overflow: hidden;
            background-color: #fff;
            height: 0.45rem;
        }

        .template_nav_box {
            line-height: 0.45rem;
            height: 0.55rem;
            overflow: hidden;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            position: relative;
        }

            .template_nav_box ul {
                display: flex;
            }

        .template_nav li {
            box-sizing: border-box;
            text-align: center;
            flex-shrink: 0;
            transition: all 0.5s ease;
            -webkit-transform: all 0.5s ease;
        }

        .template_nav .active {
            font-weight: 900;
        }



        .template_nav span {
            padding: 0 0.1rem;
        }

        .tabs_line {
            width: 100%;
            position: absolute;
            bottom: 0.05rem;
        }

        .tabs_line_s {
            height: 0.03rem;
            transition: all 0.5s ease;
            -webkit-transform: all 0.5s ease;
            position: relative;
        }

            .tabs_line_s::after {
                content: '';
                background-color: #EE0A24;
                width: 50%;
                height: 0.03rem;
                position: absolute;
                bottom: 0.1rem;
                left: 0;
                right: 0;
                margin: auto;
            }