从外部链接转到特定部分

时间:2015-11-02 22:26:52

标签: html angularjs url scroll anchor

我正在尝试创建一个锚点,以便能够构建这样的URL:

www.mysite.com/#myAnchor

应该自动链接到想要的div,即使是从外部网站。 但是,当我试图实现它时,这里是我被重定向到的地址:www.mysite.com /#/ myAnchor

到目前为止,我测试了不同的东西,例如:

 <a name="myAnchor" />
 <a name="#myAnchor"></a>
 <a name="myAnchor"></a>
 <a href="#myAnchor" target="_self"></a>
 <span class="anchor " id="myAnchor"></span>

但似乎没有任何效果。 然而,当我在页面上时,我可以更改网址,但是来自&#34;外部&#34;这只是重定向到页面顶部。

感谢您的帮助。

2 个答案:

答案 0 :(得分:0)

最有可能发生的原因是第一个锚是由浏览器完成的,当第一次加载页面时,我假设内容尚未全部加载(使用视图?)。

如果是这种情况,那么您需要在加载视图后调用角度在代码中某处提供的服务$anchorScroll(在ng-init上可能?)。像

这样的东西
<a name="myAnchor" ng-init="loadScrollToAnchor()"></a>

然后在您的控制器中,注入服务$anchorScroll

var scrolled = true;
$scope.loadScrollToAnchor = function () {
    if ( !scrolled ) {
        $anchorScroll();
        scrolled = true;
    }
};

更新: scrolled变量用于确保代码仅执行一次(在页面加载时),因此此代码应驻留在应用程序方面的控制器中不是特定于路径或视图的控制器。但是,这种方法仍然存在一些可能需要解决的缺点,比如用户首先加载页面的视图没有ng-init调用该函数,然后他移动到另一个视图:代码将执行,用户视口可能会根据用户的意图进行更改。

答案 1 :(得分:0)

要解决这个问题,我实际上只需要添加这行代码而不用其他任何东西:

<a href="#/my#Anchor"></a>

这就是诀窍。