html
<div class="zl-link">
<a class="first" [ngClass]="{'active-style': currentScroll == 'home'}" (click)="scrollToEL(1)">
<span class="num">01</span>
<div class="point"></div>
<span class="text">home</span>
</a>
<a class="second" [ngClass]="{'active-style': currentScroll == 'products'}" (click)="scrollToEL(2)">
<span class="num">02</span>
<div class="point"></div>
<span class="text">product</span>
</a>
<a class="third" [ngClass]="{'active-style': currentScroll == 'about'}" (click)="scrollToEL(3)">
<span class="num">03</span>
<div class="point"></div>
<span class="text">about</span>
</a>
<a class="fourth" [ngClass]="{'active-style': currentScroll == 'contact'}" (click)="scrollToEL(4)">
<span class="num">04</span>
<div class="point"></div>
<span class="text">contact</span>
</a>
</div>
<div id="home" class="home-box">
<h1>第一页</h1>
</div>
<div id="products" class="products-box">
<h1>第二页</h1>
</div>
<div id="about" class="about-box">
<h1>第三页</h1>
</div>
<div id="contact" class="contact-box">
<h1>第四页</h1>
</div>
css
.home-box {
width: 100%;
height: 100%;
background-color: lightseagreen;
}
.products-box {
width: 100%;
height: 100%;
background-color: orange;
}
.about-box {
width: 100%;
height: 100%;
background-color: purple;
}
.contact-box {
width: 100%;
height: 100%;
background-color: cyan;
}
.scroll-box {
height: 100%;
}
.active-style {
span {
color: #40a9ff !important;
opacity: 1 !important;
}
.point {
background-color: #40a9ff !important;
}
}
.zl-link {
position: fixed;
background: url(assets/imgs/resources/left-link.png) no-repeat;
background-position: center;
background-size: cover;
width: 8px;
height: 420px;
left: 50px;
top: calc(50% - 200px);
span {
color: #ffffff;
opacity: 0.3;
}
.num {
font-size: 14px;
margin-right: 10px;
}
.point {
display: inline-block;
width: 10px;
height: 10px;
background-color: lightgray;
border-radius: 50%;
}
.text {
font-size: 14px;
margin-left: 10px;
}
.first {
width: 150px;
position: absolute;
top: -8px;
left: -29px;
cursor: pointer;
}
.second {
width: 150px;
position: absolute;
top: 138px;
left: -29px;
cursor: pointer;
}
.third {
width: 150px;
position: absolute;
top: 283px;
left: -29px;
cursor: pointer;
}
.fourth {
width: 150px;
position: absolute;
top: 410px;
left: -29px;
cursor: pointer;
}
}
ts
import { Component, OnInit } from '@angular/core';
import { fromEvent } from 'rxjs';
@Component({
selector: 'app-demo',
templateUrl: './demo.component.html',
styleUrls: ['./demo.component.less']
})
export class DemoComponent implements OnInit {
public home: any;
public products: any;
public about: any;
public contact: any;
public currentScroll: string = 'home';
public subscribeScoll: any;
public constructor() {
console.log('DemoComponent');
}
public ngOnInit() {
console.log('ngOnInit');
this.subscribeScoll = fromEvent(window, 'scroll')
.subscribe((event) => {
this.windowScroll(event);
});
}
public ngOnDestroy() {
this.subscribeScoll.unsubscribe();
console.log('ngOnDestroy');
}
public windowScroll(event) {
var scrollTop = document.documentElement.scrollTop;
console.log(scrollTop);
}
public ngAfterViewInit() {
console.log('视图创建完成');
this.home = document.getElementById("home");
this.products = document.getElementById("products");
this.about = document.getElementById("about");
this.contact = document.getElementById("contact");
}
public scrollToEL(type:number) {
switch (type) {
case 1:
console.log(1);
this.home.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
this.currentScroll = 'home';
break;
case 2:
console.log(2);
this.products.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
this.currentScroll = 'products';
break;
case 3:
console.log(3);
this.about.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
this.currentScroll = 'about';
break;
case 4:
console.log(4);
this.contact.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
this.currentScroll = 'contact';
break;
default:
break;
}
}
}