标签: anchor-scroll

阅读AngularJS文档我还没弄清楚是否$anchorScroll可以有一个持续时间/缓动选项来平滑滚动到元素.

它只说:

$location.hash('bottom');

// call $anchorScroll()
$anchorScroll();

我不使用jquery而不想; 是否还有一种聪明而简单的方法来制作或扩展$anchorScroll以使滚动更加流畅？

我试图在同一页面上做一个简单的滚动到一个锚元素.基本上,该人点击"试一试"按钮,它会滚动到页面下方的区域,其ID为"登录".现在,它正在使用一个基本的id="login",<a href="#login"></a>但它跳到那个部分.理想情况下,我希望它滚动到那里.如果我使用的是Angular4,是否有一些内置方法可以做到这一点或者最简单的方法是什么？谢谢!

整个模板......(组件仍然是空的)

<div id="image-header">
    <div id="intro">
        <h1 class="text-center">Welcome to ThinkPlan</h1>
        <h3 class="text-center">Planning your way</h3>
        <a class="btn btn-outline-primary" href="#login" id="view">Try It</a> <!-- Where the user clicks to scroll -->
    </div>
</div>
<div class="container" id="info">
    <div class="row">
        <div class="col-md-12">
             <div class="space" id="login"></div> <!-- The place to scroll to -->
                <h1 class="text-center">ThinkPlan</h1>
                <form  class="form-horizontal">
                    <fieldset>
                        <legend>Login</legend>
                        <div class="form-group">
                            <label for="inputEmail" class="col-lg-2 control-label">Email</label>
                            <div class="col-lg-10">
                                <input type="text" class="form-control" id="inputEmail" placeholder="Email">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword" class="col-lg-2 control-label">Password</label>
                            <div …

我需要设置一个ng-click事件,以便它加载一个新页面,然后,一旦页面加载,滚动到页面上的一个锚点.我已经尝试过在这个SO帖子上提出的每个解决方案,但我无法让它正常工作.

大多数解决方案都围绕滚动到已加载的页面上的锚点.我需要在加载新页面后进行滚动.

这是我的观看代码:

<div class="see-jobs-btn" ng-click="$event.stopPropagation();goToResultJobs(r)">See Jobs</div>

这表示"个人资料卡"中的按钮.当用户点击卡片时,它会将他们带到个人资料页面.但是,当他们单击按钮时,需要将它们带到该配置文件页面的#jobs部分(因此代码中的goToResultJobs(r)之前的$ stopPropogation()).

这是我的goToResultJobs方法的样子.

$scope.goToResultJobs = function(result) {
    var profileUrl = result.slug;
    window.location = profileUrl;
};

我已经尝试过使用$anchorScroll并且只是在锚中硬编码profileUrl,但是没有人工作.我对Angular很新,所以我不知道我在这里缺少什么.

更新1:尝试使用$ timeout

这是我goToResultJobs在ResultsCtrl中的方法,当用户单击按钮时触发该方法:

$scope.goToResultJobs = function(result) {
    var url = window.location + result.slug + '#jobs';
    location.replace(url);
};

加载/name#jobs路径,调用下面的ProfileCtrl:

app.controller('ProfileCtrl', ['$scope', '$http', '$timeout', '$location', '$anchorScroll',
function($scope, $http, $timeout, $location, $anchorScroll) {
    if(window.location.hash) {
        $timeout(function() {
            console.log('TEST');
            // $location.hash('jobs');
            // $location.hash('jobs');
            $anchorScroll();
        }, 1000);
    };
}]);

此设置似乎有效,因为TEST仅在单击"作业"按钮时出现在控制台中,而不是在用户单击该配置文件时出现.我现在面临的问题是页面开始加载,并且网址栏中的路径更改为 …

我$anchorScroll在AngularJS中使用-service.它工作正常.但是我在顶部有一个固定的导航栏,滚动位置总是x像素到远.

现在在$anchorScroll文档中有一个名为的属性yOffset.根据文档,它应该解决我的问题.

我不知道如何使用这个yOffset属性,因为这个特定的部分没有例子.

我如何使用-service 的yOffset-property $anchorScroll？

在我的应用程序有不同的4个链路ID秒和4 DIV具有相同ID的各个环节(我使用他们的锚跳跃).

我目前的代码:

<a href="#1" id="go1" class="btn" data-anchor="relativeanchor">One</a>
<a href="#2" id="go2" class="btn" data-anchor="relativeanchor">Two</a>
<a href="#3" id="go3" class="btn" data-anchor="relativeanchor">Three</a>
<a href="#4" id="go4" class="btn" data-anchor="relativeanchor">Four</a>

<div class="col-md-12 each-img" id="1">
    <img src="img/album-img.png">
</div>

<div class="col-md-12 each-img" id="2">
    <img src="img/album-img.png">
</div>

<div class="col-md-12 each-img" id="3">
    <img src="img/album-img.png">
</div>

<div class="col-md-12 each-img" id="4">
    <img src="img/album-img.png">
</div>

有时用户id="2"在点击按钮之前只先滚动到第二个div ,当他们这样做时,他们会先发送到顶部id="1"而不是继续下一个ID id="3".

使用时,一次只能看到一个按钮CSS,当单击链接时,我删除该链接.

CSS

a.btn{display: none}    
a.btn a:first-child{display: block !important;}

jQuery的

$(document).ready(function(){
    $('a.btn').click(function …

我试图用AngularJS $anchorScroll用$location.hash.但是,当我设置哈希时,AngularJS会在其后面添加一个正斜杠.

例如,网址是:http://localhost:13060/Dashboard.当我不包括AngularJS库时,我可以单击链接#contact,然后转到http://localhost:13060/Dashboard#contact.

但是,当我包含AngularJS并单击该链接时,它会http://localhost:13060/Dashboard#/contact阻止$ anchorScroll工作.

编辑$ anchorScroll不起作用

起始URL是http://localhost:13060/Category.当我添加一个类别时,它应该转到http://localhost:13060/Category#/#id(其中id是新的id)并向下滚动页面.URL正在更新但$ anchorScroll不滚动.

 //jump to new category
 $location.path("");
 $location.hash(cat.ID);
 $anchorScroll();

我的html页面上有5个锚点.有没有办法通过单个鼠标滚轮滚动页面自动滚动到下一个锚点(#)？有没有办法,无论锚的名称如何都会发生？刚到下一个锚.

我在我的离子应用程序中使用$ anchorscroll,在Android上它运行正常但在iOS上我的内容在滚动后卡住了,我无法向上滚动.

我尝试使用overflow-scroll ="true",但这在我的应用程序中都不起作用...

有人可以帮我这个吗？

function scrollTo() {
    console.log("scroll to: " + $stateParams.id);
    var anchor = '';
    if($stateParams.id === '') {
        console.log("empty");
        anchor = "birthday-test";
    } else {
        console.log("not empty");
        var employee_id = $stateParams.id;
        anchor = "birthday-" + employee_id;
    }
    console.log("anchor : " + anchor);
    $location.hash(anchor);
    $anchorScroll();
}

我正在使用 React 制作单个滚动页面，并希望导航到页面的特定部分。在 HTML 中，我们使用 href 和锚标记来实现这种交互。

我找到了一个名为 react-scroll 的 React 库，但我不知道如何从 NavBar 组件中的 a 链接链接不同文件夹中的每个组件。我的 NavBar 有多个链接用于滚动到一个部分/组件。任何帮助将不胜感激！

  import React, { Component } from "react";
  import { Link, animateScroll as scroll } from "react-scroll";
  class Navbar extends Component {

    render() {
      return (
        <nav className="navbar navbar-expand-lg navbar-dark">
          <Link className="navbar-brand" to="/">
            CMD <span>Custom Movie Database</span>
          </Link>
          <button
            className="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarNav"
            aria-controls="navbarNav"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon" />
          </button>
          <div className="collapse navbar-collapse" id="navbarNav">
            <ul className="navbar-nav">
              <li className="nav-item ">
                <Link
                  className="nav-link" …

单击链接时，我想导航到不同页面/组件的片段。即使尝试了多种方法，我也无法实现这一目标：

关联：

<a routerLink="/main/dash" fragment="dir">View</a>

目标 html/模板：

<!-- Other elements -->

<app-dir id="dir"></app-dir>

路由器配置：

{
   path: 'main',
   component: LayoutComponent,
   children: [{
      path: 'dash',
         loadChildren: () => import('src/app/features/dash/dash.module').then(m => m.DashModule),
         canActivate: [AuthGuard]
   }]

   // Other code
}
   
// Other code

imports: [RouterModule.forRoot(appRoutes, { useHash: true, anchorScrolling: 'enabled', onSameUrlNavigation: 'reload' })],

单击“查看”链接时，系统导航到/main/dash路径/页面/组件，但在第一次运行时不会滚动到片段。进入主页后，当我单击相同的导航链接（视图 - 位于标题中）时，它会滚动到片段。

即当我已经在同一个页面/组件上时，AnchorScrolling 工作，但如果源是不同的页面/组件，则不起作用。

我也尝试使用(click)&this.router.navigate()而不是使用 routerLink - 但结果是一样的。

我确实使用HashLocationStrategy.

任何帮助，将不胜感激。

谢谢！

更新：

在深入挖掘之后，页面加载 Angular 后的片段路由是我面临的确切问题。似乎还没有可用的解决方案？：https : //github.com/angular/angular/issues/30139