AngularJS / JQuery: scroll from current location to element

Question

This is my current directive, which I found as the second answer to the following question - ScrollTo function in AngularJS:

.directive('scrollToItem', function($timeout) {                                                      
    return {                                                                                 
        restrict: 'A',                                                                       
        scope: {                                                                             
            scrollTo: "@"                                                                    
        },                                                                                   
        link: function(scope, $elm,attr) {                                                   

            $elm.on('click', function() {                                                    
                $('html,body').animate({scrollTop: $(scope.scrollTo).offset().top }, "slow");
            });                                                                              
        }                                                                                    
    }})

The code above can be used like so:

<a id="top-scroll" name="top"></a>
<div class="back-to-top" scroll-to-item scroll-to="#top-scroll">

The issue is that this causes the page to quickly scroll all the way up and then animate from the top. Is there a recommended way for me to scroll from the current location to the desired position?

Community · Accepted Answer · 2017-05-23 10:27:08Z

1

One solution would be to change

$elm.on('click', function() {                                                    
                $('html,body').animate({scrollTop: $(scope.scrollTo).offset().top }, "slow");
            });

to

$elm.on('click', function(e) {                                                    
    e.preventDefault();
   $('html,body').animate({scrollTop: $(scope.scrollTo).offset().top }, "slow");
});

which I found here: jQuery flicker when using animate-scrollTo

I'll wait and see if there is a better solution. If not, I'll just mark this one as the correct solution.

edited May 23, 2017 at 10:27

CommunityBot

11 silver badge

answered Aug 5, 2015 at 5:52

SilentDev

23k32 gold badges125 silver badges225 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS / JQuery: scroll from current location to element

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related