SOURCE

console 命令行工具 X clear

                    
>
console
$(function () {
    $('li').on('click', function() {
        tabMove(this);
    })
}) 

var tabMove = (obj) => {
    let boxDiv = $(obj).parents('div');
    let boxUl = $(obj).parent('ul');

    $(obj).siblings().removeClass('active');
    $(obj).addClass('active');

    console.log($(obj).position().left)

    boxDiv.scrollLeft(obj.offsetLeft - ((boxDiv.width() / 2) - ($(obj).width() / 2)));
}
<div>
    <ul>
        <li>选项1</li>
        <li>选项2</li>
        <li>选项3</li>
        <li>选项4</li>
        <li>选项5</li>
        <li>选项6</li>
        <li>选项7</li>
        <li>选项8</li>
        <li>选项9</li>
        <li>选项10</li>
        <li>选项11</li>
    </ul>
</div>

<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>
<p>12312312</p>

<a onclick="$('html').scrollTop(0)">TOP</a>
div {
    display: flex;
    width: 240px;
    overflow: auto;
    scroll-behavior: smooth;
}
ul, li {
    list-style: none;
    padding: 0;
}
ul {
    white-space: nowrap;
}
li {
    cursor: pointer;
    display: inline-block;
    padding: 0 10px;
}
li.active {
    color: red;
}

a {
    cursor: pointer;
    position: fixed;
    right: 10px;
    bottom: 10px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    background: red;
    border-radius: 50%;
}

html {
    scroll-behavior: smooth;
    overflow-scrolling: touch;
}

本项目引用的自定义外部资源