首页 > 解决方案 > 如何使 templateURL 滚动到页面的某些部分?

问题描述

你们能帮我解决我的 routeProvider 吗?

$routeProvider.when('/farm', {
        templateUrl: '/index.htm#farm'
    });

#farm不起作用。我想要它,这样当有人从 Outlook 中单击Farm链接时,它会转到索引页面并向下滚动到 id 为farm. 我的 div 也已经有一个农场 ID,所以我猜这没问题。

我已经阅读了很多资料和解决方案,但他们都说锚标签在 templateURL 上不起作用。我想知道你们是否有解决这个问题的方法。

顺便说一句,示例链接是:www.test.com/index#farm 在 Outlook 电子邮件中单击该链接不会向下滚动到位置#farm。相反,它会转到索引页面并将 URL 转换为仅/index没有#farm

这是我代码的另一部分,以防这些人弄乱它:

$locationProvider.hashPrefix('');

    $routeProvider.when('/index', {
        templateUrl: '/index.htm'
    });
    $routeProvider.when('/farm', {
        templateUrl: '/index.htm#farm'
    });
    $routeProvider.when('/error', {
        templateUrl: '/error.htm'
    });
    $routeProvider.otherwise({ redirectTo: '/index' });

我认为它.otherwise正在使它进入 index.htm。有没有其他方法可以添加另一个可能向下滚动到农场在索引页面中的位置的 routeProvider 和 templateURL?

当我尝试templateURL: '/index.html#farm'时,它只去了/index%23farm不向下滚动的地方。

所以基本上链接是外部的(来自电子邮件),如果他们点击它,我希望他们向下滚动到哪里#farm

标签: c#angularjsasp.net-mvcroute-provider

解决方案


使用 $anchorScroll();

将 $anchorScroll 注入你的控制器并使用它。

https://docs.angularjs.org/api/ng/service/ $anchorScroll

 // the element you wish to scroll to.
  $location.hash('farm’);

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

推荐阅读