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