angular7项目中使用页面锚点

缺乏、安全感 2021-10-18 05:43 546阅读 0赞

在angular项目中使用页面锚点，原生的html锚点的时候会页面跳转或者找不到路由。

可以使用以下方式解决：

html

<div class="circle_list">
        <div class="circle wow zoomIn" (click)="goDistance1()">优质原料</div>
        <div class="circle wow zoomIn" (click)="goDistance2()">伴施产品</div>
        <div class="circle wow zoomIn" (click)="goDistance3()">产品特点</div>
    </div>
    
    <h2 class="sub_title wow fadeInRight" #distannce1>优质原料</h2>
    <h2 class="sub_title wow fadeInRight" #distannce2>伴施产品</h2>
    <h2 class="sub_title wow fadeInRight" #distannce3>产品特点</h2>

ts

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
    
    @Component({
      selector: 'app-soil-testing-fertilizer',
      templateUrl: './soil-testing-fertilizer.component.html',
      styleUrls: ['./soil-testing-fertilizer.component.scss']
    })
    export class SoilTestingFertilizerComponent implements OnInit {
    
        @ViewChild('distannce1') distannce1: ElementRef;
        @ViewChild('distannce2') distannce2: ElementRef;
        @ViewChild('distannce3') distannce3: ElementRef;
    
        constructor() { }
    
        ngOnInit() {
        }
    
        // 页面锚点
        goDistance1() {
            this.distannce1.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' });
        }
    
        goDistance2() {
            this.distannce2.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' });
        }
    
        goDistance3() {
            this.distannce3.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' });
        }
    
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，546人围观）

还没有评论，来说两句吧...

相关阅读

相关 Angular中锚点的写法

普通页面中的写法 <a href="id">跳转</a> <div id="id">指定位置</div> 此方法在angular中是失效的，因为此写法跟路由

电玩女神/ 2023年06月22日 03:18/ 0 赞/ 19 阅读

相关锚点的使用

我们可以理解锚点为一种超链接，只不过它是网页内部的超链接。我们可以利用它跳转到网页内指定的位置使用技巧: <div id="sa" name="sa">我是锚点，哈哈

ゝ一世哀愁。/ 2022年07月19日 11:58/ 0 赞/ 255 阅读

相关 JS页面锚点滑动

//主页面 <html> <head> </head> <body> <div id='s\_1' ></div> <div id='s\_2' ></div>

Myth丶恋晨/ 2022年07月13日 08:54/ 0 赞/ 180 阅读

相关 HTML锚点的使用

一、页面内跳转的锚点设置页面内的跳转需要两步：方法一： ①：设置一个锚点链接<a href="\miao">去找喵星人

ゞ浴缸里的玫瑰/ 2022年05月18日 04:19/ 0 赞/ 249 阅读

相关使用a锚点跳转到页面指定位置

<a href="reviewDetails">查看审核详情</a> <h4 id="reviewDetails" class="font_bold">开题报告

末蓝、/ 2022年03月16日 10:00/ 0 赞/ 361 阅读

相关 vue项目锚点的使用

在vue项目中如何使用锚点呢？在vue-router中定义 scrollBehavior scrollBehavior (to, from, savedPosition)

我会带着你远行/ 2021年12月15日 13:57/ 0 赞/ 384 阅读

相关 vue跨页面锚点跳转

> 从theindex.vue跳转到investment.vue,`红色部分就是写入的地方` > theindex.vue ![在这里插入图片描述][watermark_t

偏执的太偏执、/ 2021年12月10日 07:39/ 0 赞/ 577 阅读

相关 angular7中使用iframe来加载外部页面

在angular7中使用echarts的线性地图的时候，发现出来缩成了一团，暂未找到解决方案。但是在普通的html中直接引入并使用是没有问题的。因此，转换了思路，使用ifram

ゝ一世哀愁。/ 2021年10月19日 05:16/ 0 赞/ 473 阅读

相关 angular7项目中使用页面锚点

在angular项目中使用页面锚点，原生的html锚点的时候会页面跳转或者找不到路由。可以使用以下方式解决： html <div class="circle_l

缺乏、安全感/ 2021年10月18日 05:43/ 0 赞/ 547 阅读

相关锚点

$('.kk').on('click', function(e) { var thisId = $(this).attr('id');

男娘i/ 2021年09月19日 11:16/ 0 赞/ 459 阅读