hrefs with anchor scroll inside a dropdown

Question

I have a drop-down like so:

<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>

Basically, the dropdown element's name is inside an array and there are divs inside the html having the id as i.id like this:

<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>

whenever I click the dropdown element, I want it to scroll to the particular section. But nothing happens when I do so. Why does this happen? And when I tried inspect element in chrome, it doesn't even show the tags in the ng-repeat dropdown.

I don't think you need to use that interpolation in the `ng-href` directive, i.e. try `ng-href="i.id"` — wbadart, Jul 03 '17 at 22:00
@wilusdaman that did not work. Whats weird is, when I used inspect element on chrome, it didn't even show the tag — Jake259, Jul 03 '17 at 22:03
Gotcha. That doesn't surprise me; inputs aren't really meant for purposes like this. I'd encourage you to use a list-based dropdown for more consistent behavior. If you're using a css library, it will almost certainly provide you with one, and if not, check [this](https://stackoverflow.com/questions/23374678/can-a-div-be-created-to-act-like-a-dropdown) out — wbadart, Jul 03 '17 at 22:06

score 0 · Answer 1 · answered Jul 03 '17 at 22:06

0

You should use Angular's $anchorScroll.

Please, take a look at this similar question: How to handle anchor hash linking in AngularJS

answered Jul 03 '17 at 22:06

tiagodws

1,345
13
20

This worked when I used
and

Jake259

Jul 03 '17 at 22:21

How did you do it? The ` – tiagodws Jul 04 '17 at 00:52

score 0 · Answer 2 · answered Jul 03 '17 at 22:31

Uhhm, my suggestion seems completely unrelated as I'm a dummy at AngularJS. But I have a solution to scrolling to a section using jQuery. You could simply give the section an ID and animate scrolling to that point on click by calculating the top offset and animating the scrolltop to that point...If you want me to show you the code, I'll gladly do so...:-) (Oh and I know this should be a comment because it doesn't directly answer the question, but my reputation's 13 so I can't comment)...

hrefs with anchor scroll inside a dropdown

2 Answers2