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

发布时间：2026-09-26 10:28:18 阅读量： 16 来源： 互联网转载

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

流程说明

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

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

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;            }

上一篇: 五大机构预测：2010年的30大安全威胁（1）

下一篇: 选购虚拟主机的一些的基本概念

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

热门文章