blocks|key|2622646|text|您可以使用javascript来完成这一任务：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2622647|gotoTop()+{
++let+el+=+document.getElementById('navbar');
++el.scrollTop+=+el.scrollHeight;
}|code-block|syntax|javascript|2622648|当调用该方法时，这将使带有id="navbar"的DOM元素进入视图。还可以选择使用Element.scrollIntoView。这可以提供一个平滑的动画，看上去不错，但不支持在旧浏览器。|offset|length|style|CODE|2622649|如果元素位于不同的组件中，则可以引用几种不同的方式，如这个问题中所示。|2622650|对于您的情况，最简单的方法可能是：|2622651|import+{+ElementRef+}+from+'@angular/core';+//+at+the+top+of+component.ts

constructor(myElement:+ElementRef)+{+...+}+//+in+your+export+class+MyComponent+block|2622652|最后|2622653|gotoTop()+{
++let+el+=+this.myElement.nativeElement.querySelector('nav');
++el.scrollIntoView();
}|2622654|工作柱塞。|2622655|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView|1|https://stackoverflow.com/questions/32693061/angular-2-typescript-get-hold-of-an-element-in-the-template|2|https://plnkr.co/edit/OU2oYtNE9yYKmuYx6jNC?p=preview^0|0|0|D|B|16|M|0|0|R|4|1|0|0|0|0|0|0|5|2|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1B|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1C|8|@$I|1D|J|1E|K|L]]|9|@$I|1F|J|1G|1|1H]]|A|$]]|$1|M|3|N|5|6|7|1I|8|@]|9|@$I|1J|J|1K|1|1L]]|A|$]]|$1|O|3|P|5|6|7|1M|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|1N|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|1O|8|@]|9|@]|A|$]]|$1|U|3|V|5|D|7|1P|8|@]|9|@]|A|$E|F]]|$1|W|3|X|5|6|7|1Q|8|@]|9|@$I|1R|J|1S|1|1T]]|A|$]]|$1|Y|3|-4|5|6|7|1U|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|15]]|16|$5|11|12|13|A|$14|17]]|18|$5|11|12|13|A|$14|19]]]]

You can do this with javascript:

<pre><code>gotoTop() {
 let el = document.getElementById('navbar');
 el.scrollTop = el.scrollHeight;
}
</code></pre>

This will bring the DOM element with <code>id="navbar"</code> into view when the method is called. There's also the option of using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView" rel="noreferrer">Element.scrollIntoView</a>. This can provide a smooth animation and looks nice, but isn't supported on older browsers.

If the element is in a different component you can reference it several different ways as seen in <a href="https://stackoverflow.com/questions/32693061/angular-2-typescript-get-hold-of-an-element-in-the-template">this question</a>.

The easiest method for your case would likely be:

<pre><code>import { ElementRef } from '@angular/core'; // at the top of component.ts

constructor(myElement: ElementRef) { ... } // in your export class MyComponent block
</code></pre>

and finally 

<pre><code>gotoTop() {
 let el = this.myElement.nativeElement.querySelector('nav');
 el.scrollIntoView();
}
</code></pre>

<a href="https://plnkr.co/edit/OU2oYtNE9yYKmuYx6jNC?p=preview" rel="noreferrer">Working plunker.</a>

blocks|key|1291679|text|我认为你的方式不可行是因为空置的路由器。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1291680|this.router.navigate(['/home'],+{+fragment:+'top'+});|code-block|syntax|javascript|1291681|如果'home‘被声明为一条路由，并且它上有id="top“元素，它就会工作。|1291682|我知道你希望它是“纯角度的方式”，但这应该是可行的(至少)：|1291683|gotoTop(){
++location.hash+=+"#navbar";
}|1291684|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I think your way didn't work because of the empty router.

<pre><code>this.router.navigate(['/home'], { fragment: 'top' });
</code></pre>

would work if 'home' is declared as a route and you have the id="top" element on it.

I know you would like it to be "pure Angular way", but this should work (at least):

<pre><code>gotoTop(){
 location.hash = "#navbar";
}
</code></pre>

blocks|key|2622774|text|我知道，您希望滚动到页面中的特定元素。但是，如果元素位于页面顶部，则可以使用以下方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2622775|window.scrollTo(0,+0);|code-block|syntax|javascript|2622776|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I know, you want to scroll to a specific element in the page. But, if the element is in the top of the page, then you can use the following:

<pre><code>window.scrollTo(0, 0);
</code></pre>

blocks|key|2585811|text|document.getElementById("YOUR_DIV_ID").scrollIntoView({+behavior:+'smooth'+});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2585812|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>document.getElementById(&quot;YOUR_DIV_ID&quot;).scrollIntoView({ behavior: 'smooth' });
</code></pre>

Upon clicking a button (which is bottom of the page), I want to go to a certain element (in my case, #navbar) which is in the top of the current page, but I don't know how to do it. I've tried the following code with no avail. 

<pre><code>&lt;nav class="navbar navbar-light bg-faded" id="navbar"&gt;
 &lt;a class="navbar-brand" href="#"&gt;
 {{appTitle}}
 &lt;/a&gt;
 &lt;!-- rest of the nav link --&gt;
&lt;/nav&gt;
&lt;!-- rest of the page content --&gt;

&lt;!-- bottom of the page --&gt;
&lt;button class="btn btn-outline-secondary" (click)="gotoTop()"&gt;Top&lt;/button&gt;
</code></pre>

In angular component: 

<pre><code>import { Router } from '@angular/router';
 /* rest of the import statements */
export class MyComponent {
 /* rest of the component code */
 gotoTop(){
 this.router.navigate([], { fragment: 'navbar' });
 }
}
</code></pre>

I would really appreciate if someone helped me out with a solution and explained why my code hadn't worked. 

Please note that element (navbar) is in other component.

Scroll to a certain element of the current page in Angular 4

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

单击一个按钮(这是页面的底部)，我想转到当前页面顶部的某个元素(在我的例子中是#navbar)，但是我不知道该如何做。我尝试了下面的代码，但没有结果。<nav class="navbar navbar-light bg-faded" id="navbar"> <a class="navbar-brand" hre...

问滚动到当前页的某个元素(角4)。
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问滚动到当前页的某个元素(角4)。EN