带有锚点滚动的hrefs在下拉列表中

时间:2017-07-03 21:56:12

标签: html css angularjs

我有一个下拉列表:

<div class="dropdown">
        <select>
            <option ng-repeat="i in sc.cl" value="{{i.deptname"}}><a ng-href="#{{i.id}}">{{i.deptname}}</a></option>
        </select>
</div>

基本上,dropdown元素的名称在数组中,并且html中有div,其id为i.id,如下所示:

<div class="right-bar">
                <section class="contact-block" ng-repeat="i in sc.cl" id="{{i.id}}">
                    <div class="description">{{i.deptname}}</div>
                    <div class="inner-block">
                        <div ng-repeat="j in i.cgs">
                            <img class="vertical-image" src="frame.png">
                            <img class="horizontal-image" src="mobileframe.png">
                        </div>
                    </div>
                </section>
            </div>

每当我点击下拉元素时,我希望它滚动到特定部分。但是当我这样做时没有任何反应。为什么会这样?当我尝试在chrome中检查元素时,它甚至不会在ng-repeat下拉列表中显示标记。

2 个答案:

答案 0 :(得分:0)

您应该使用Angular&#39; $anchorScroll

请看一下这个类似的问题:How to handle anchor hash linking in AngularJS

答案 1 :(得分:0)

嗯,我的建议似乎完全无关,因为我是AngularJS的假人。但我有一个使用jQuery滚动到一个部分的解决方案。您可以通过计算顶部偏移量并将滚动顶部动画到该点来简单地为该部分提供ID和动画滚动到该点的动画...如果您希望我向您展示代码,我很乐意这样做... :-)(哦,我知道这应该是一个评论,因为它不直接回答问题,但我的声誉是13,所以我无法评论)...