vue版锚点定位巡航

vue版锚点定位巡航

效果图

演示视频

vue版锚点定位巡航

概述

页面滚动时，指示器会自动定位到指定位置；点击指示器，页面可以定位到相应的位置。

使用

将demo中核心代码复制到需要添加定位巡航、锚点定位的页面中即可。

完整demo

<template>
<div class="demo">
    <h2>页面锚点定位-李大福制作</h2>
    <div class="block block-1" ref="anchor1">
        <h4>anchor1</h4>
        <div>
            这是文章的测试内容，含标点一共二十个字。这是文章的测试内容，含标点一共二十个字。这是文章的测试内容，含标点一共二十个字。
        </div>
    </div>
    <div class="block block-2" ref="anchor2">
        <h4>anchor2</h4>
        <div>
            这是文章的测试内容，含标点一共二十个字。这是文章的测试内容，含标点一共二十个字。这是文章的测试内容，含标点一共二十个字。
        </div>
    </div>
    <div class="block block-3" ref="anchor3">
        <h4>anchor3</h4>
        <div>
            这是文章的测试内容，含标点一共二十个字。这是文章的测试内容，含标点一共二十个字。这是文章的测试内容，含标点一共二十个字。
        </div>
    </div>
    <div class="block block-4" ref="anchor4">
        <h4>anchor4</h4>
        <div>
            这是文章的测试内容，含标点一共二十个字。这是文章的测试内容，含标点一共二十个字。这是文章的测试内容，含标点一共二十个字。
        </div>
    </div>
    <div class="block block-5" ref="anchor5">
        <h4>anchor5</h4>
        <div>
            这是文章的测试内容，含标点一共二十个字。这是文章的测试内容，含标点一共二十个字。这是文章的测试内容，含标点一共二十个字。
        </div>
    </div>
    <div class="block block-6" ref="anchor6">
        <h4>anchor6</h4>
        <div>
            这是文章的测试内容，含标点一共二十个字。这是文章的测试内容，含标点一共二十个字。这是文章的测试内容，含标点一共二十个字。
        </div>
    </div>
    <div class="block block-7" ref="anchor7">
        <h4>anchor7</h4>
        <div>
            这是文章的测试内容，含标点一共二十个字。这是文章的测试内容，含标点一共二十个字。这是文章的测试内容，含标点一共二十个字。
        </div>
    </div>
    <div class="anchors">
        <div v-for="(item,index) in anchorList" :key="index" @click="goAnchor(index)">
            <div class="anchor" :class="item.name==anchorName?'active':''"></div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            scrollTop: 0,
            scrollDotList: [],
            gutter: -10,
            anchorName: 'anchor1',
            anchorList: [{
                    name: 'anchor1',
                },
                {
                    name: 'anchor2',
                },
                {
                    name: 'anchor3',
                }, 
                {
                    name: 'anchor4',
                },
                {
                    name: 'anchor5',
                },
                {
                    name: 'anchor6',
                },
                {
                    name: 'anchor7',
                },
            ],
        }
    },
    mounted() {
        this.initAnchor()
        window.addEventListener('scroll', this.handleScroll)
        window.addEventListener('resize', this.handleZoom, false)
    },
    destroyed() {
        window.removeEventListener("scroll", this.handleScroll);
        window.removeEventListener("resize", this.handleZoom);
    },
    methods: {
        initAnchor() {
            this.createScrollDotList()
            // 页面刷新后到顶部
            document.body.scrollTop = document.documentElement.scrollTop = 0
        },
        // 去往指定位置
        goAnchor(index) {
            document.body.scrollTop = document.documentElement.scrollTop = this.scrollDotList[index];
            this.anchorName = this.anchorList[index].name
        },
        createScrollDotList() {
            this.$nextTick(() => {
                this.scrollDotList.length = 0
                this.anchorList.forEach((item) => {
                    let offsetTop = this.$refs[item.name].offsetTop
                    this.scrollDotList.push(offsetTop)
                })
                // console.log(this.scrollDotList)
            })
        },
        handleZoom() {
            this.createScrollDotList(t)
        },
        handleScroll() {
            this.scrollTop =window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop;
            // console.log('页面滚动',this.scrollTop)
            if (this.scrollTop > this.scrollDotList[0] + this.gutter) {
                this.anchorName = 'anchor1'
            }
            if (this.scrollTop > this.scrollDotList[1] + this.gutter) {
                this.anchorName = 'anchor2'
            }
            if (this.scrollTop > this.scrollDotList[2] + this.gutter) {
                this.anchorName = 'anchor3'
            }
            if (this.scrollTop > this.scrollDotList[3] + this.gutter) {
                this.anchorName = 'anchor4'
            }
            if (this.scrollTop > this.scrollDotList[4] + this.gutter) {
                this.anchorName = 'anchor5'
            }
            if (this.scrollTop > this.scrollDotList[5] + this.gutter) {
                this.anchorName = 'anchor6'
            }
            if (this.scrollTop > this.scrollDotList[6] + this.gutter) {
                this.anchorName = 'anchor7'
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.demo {
    padding: 0 10%;

    .block {
        height: 1000px;
        border: 1px solid #ccc;

        &-1 {
            height: 1000px;
            background-color: Moccasin;
        }

        &-2 {
            height: 1200px;
            background-color: LemonChiffon;
        }

        &-3 {
            height: 800px;
            background-color: lightgreen;
        }

        &-4 {
            height: 1200px;
            background-color: SeaGreen1;
        }

        &-5 {
            height: 1200px;
            background-color: DeepSkyBlue;
        }

        &-6 {
            height: 800px;
            background-color: LtGoldenrodYello;
        }

        &-7 {
            height: 1600px;
            background-color: Wheat;
        }
    }
}
</style>
<!-- 定位巡航核心代码 -->
<style lang="scss" scoped>
.anchors {
    position: fixed;
    z-index: 100;
    right: 20px;
    top: 42%;

    .anchor {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 2px solid #0052D9;
        margin-bottom: 10px;
        cursor: pointer;

        &.active {
            background-color: #0052D9;
        }
    }
}
</style>

如果觉得有用，请点赞收藏一键三连让更多的同行少走弯路，祝所有同行朋友，程序没bug！