uniapp楼层跳转、锚点效果

 话不多说，直接上代码：

1、内容滚动，头部tab选中效果也自动移动，且支持tab自动左右移动

2、tab点击，内容自动滚动

<template>
	<view class="home-page">
		<view class="slider-tab">
		    <!-- 头部tab -->
			<view class="top-tabs" :style="{paddingTop:navBarHeight + 50 + 'px'}">
				<scroll-view scroll-x="true" :scroll-left="scrollLeft" @scroll="scrollTab" class="tab-box">
					<view v-for="(item, index) in navList" :key="item.name" :class="'tab-item f-title tab-item' + index"
						@click="changeScrollTop(item, index)">
						<view :class="{'menu-topic-act':currentActive === index}">
							<text class="menu-topic-text">{{item.name}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		    <!-- 展示内容 -->
		    <view class="page-contetns">
		      <view class="items" v-for="(item, index) in navList" :key="index">
		        <view :class="'item' + index" style="height:600rpx">
		          <h2>{{ item.val }}</h2>
		        </view>
		      </view>
		    </view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"home",
		data() {
			return {
				navBarHeight: 0,
				navList: [
					{
					  name: '全部',
					  val: '全部'
					},
					{
					  name: 'demo1',
					  val: 'demo1'
					},
					{
					  name: 'demo2',
					  val: 'demo2'
					},
					{
					  name: 'demo3',
					  val: 'demo3'
					},
					{
					  name: 'demo4',
					  val: 'demo4'
					},
					{
					  name: 'demo5',
					  val: 'demo5'
					},
					{
					  name: 'demo6',
					  val: 'demo6'
					},
				],
			    preActive: 0,
			    currentActive: 0,
			    isClick: false,
				scrollLeft: 0,
				old: {
					scrollLeft: 0
				},
			}
		},
		created() {
			this.navBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		},
		onPageScroll (obj) {
		    const { scrollTop } = obj
		    this.scrollTochang(scrollTop)
		},
		mounted () {
		    this.$nextTick(() => {
				this.navList.forEach((item, index) => {
					uni
						.createSelectorQuery()
						.select('.page-contetns')
						.boundingClientRect(data => {
							uni
								.createSelectorQuery()
								.select(`.item${index}`)
								.boundingClientRect(res => {
									item.scrollTop = res.top - data.top;
								})
								.exec()
						})
						.exec()
					uni
						.createSelectorQuery()
						.select('.top-tabs')
						.boundingClientRect(data => {
							uni
								.createSelectorQuery()
								.select(`.tab-item${index}`)
								.boundingClientRect(res => {
									item.scrollLeft = res.left - data.left;
								})
								.exec()
						})
						.exec()
				})
			})
		},
		methods: {
			changeScrollTop (item, index) {
			    this.isClick = true
			    const that = this
			    const { scrollTop } = item
			    this.currentActive = index
			    uni.pageScrollTo({
					duration: 80 * Math.abs(this.currentActive - this.preActive),
					scrollTop,
					complete () {
					    that.isClick = false
					}
			    })
			    this.preActive = this.currentActive
			},
			scrollTochang (scrollTop) {
			    if (this.isClick) return
			    const idx = this.navList.findIndex(item => scrollTop <= item.scrollTop);
			    if (this.currentActive === idx) return
			    this.currentActive = idx;
			    this.preActive = this.currentActive;
			    if (this.old.scrollLeft > this.navList[idx].scrollLeft ||
			    	(this.old.scrollLeft + uni.getWindowInfo().windowWidth) < this.navList[idx].scrollLeft) {
			    	this.scrollLeft = this.old.scrollLeft;
			    	this.$nextTick(() => {
			    		this.scrollLeft = this.navList[idx].scrollLeft;
			    	});
			    }
			},
			scrollTab(e) {
				this.old.scrollLeft = e.detail.scrollLeft;
			},
		},
	}
</script>

<style lang="scss" scoped>
	.home-page {
		box-sizing: border-box;
		.slider-tab {
			background: #F7F7F7;

			::-webkit-scrollbar {
				display: none;
				width: 0 !important;
				height: 0 !important;
				-webkit-appearance: none;
				background: transparent;
				color: transparent;
			}

			uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
				/* 隐藏滚动条，但依旧具备可以滚动的功能 */
				display: none;
				width: 0 !important;
				height: 0 !important;
				-webkit-appearance: none;
				background: transparent;
				color: transparent;
			}
			
			.top-tabs {
				display: flex;
				flex-direction: column;
				position: sticky;
				top: 0;
				left: 0;
				white-space: nowrap;
				width: 100%;
				height: 100rpx;
				z-index: 10;
				background: #E6FDFB;
				
				.tab-box {
					width: 100%;
					height: 72rpx;
						
					.tab-item {
						display: inline-block;
						white-space: nowrap;
						height: 72rpx;
						position: relative;
						
						.menu-topic-text {
							font-weight: 400;
							font-size: 30rpx;
							color: #313335;
							padding: 10rpx 28rpx;
						}
						
						.menu-topic-act {
							.menu-topic-text {
								font-weight: 700;
								font-size: 31rpx;
								color: #000000;
						
								&::after {
									content: '';
									position: absolute;
									background-image: url(https://i.hd-r.cn/48760310f06b922d7bb10fe49b9360ba.png);
									background-size: cover;
									width: 40rpx;
									height: 26rpx;
									bottom: 8rpx;
									left: calc(50% - 20rpx);
								}
							}
						}
					}
				}
			}
		}
	}
</style>

效果图粗略如下：

 直接可运行。