How to make webpage not scroll to the top when data displayed on it changes

Question

Sorry for weird title, but couldn't find better explanation.

I have spring webapp, which on one page has content similar to social network. In angularjs controller I have an array in which I store posts to be displayed on view. So with ng-repeat I am displaying the content of that array in controller. On the bottom of the page I have button that loads more posts (since I don't want all possible posts to be displayed at once), and I append new posts to array, and the list on actual page updates and show loaded posts, but when I click on that button that loads more posts browser scrolls to the top of the page, is there a way to somehow disable that scrolling to the top?

This is the shortened version of my code.

html:

    <div class="main" ng-model="activities" ng-repeat="activity in activities">
        <div class="helper" >
        <center>
            <p><img alt="{{activity.user.username}}" ng-src="pictures/{{activity.user.picture}}" height="50px"> </img> </p>
            <p><a href="#" >{{activity.user.username}} </a></p>
            <br />
            <p class="date">{{activity.activity.datum}} </p>
            <p>
            {{activity.activity.tempo}}/km {{activity.activity.distance}} km</p>
            <br />
        </center>
        </div>
        <br/><br/>
    </div>
    <center><a href="#" ng-click="loadMore()">Load more</a></center>
</div>

js

    $scope.loadMore = function(){
        $scope.getActivities(3 , $scope.currentPage+1 , $scope.loggedInUser.username).then(function(response){
            $scope.currentPage++;

            for(var i = 0; i<response.length; i++){
                $scope.activities.push(response[i]);
            }
        });
    }

Every time $scope.activities is changed, that change is shown on the view automatically, but it also scrolls the page to the top.

Try replacing anchor's href attribute value to `javascript:void(0)` instead of `#` — Gaara, Aug 12 '17 at 17:35
`` [takes you to the top of the page](https://stackoverflow.com/questions/4855168/what-is-href-and-why-is-it-used). You could use a different value, like `href="#!"`, or you could leave off `href` and style the link using CSS. — Alex K, Aug 12 '17 at 17:47
@AlexK Thanks a lot, that worked, post that in the answer if you want me to accept it. — wdc, Aug 12 '17 at 18:09

score 1 · Accepted Answer · answered Aug 12 '17 at 18:23

<a href="#"> takes you to the top of the page. To prevent that behavior from your links, you can do any of the following

Use href="#!" (where ! is not an id of any element on the page)
Use href="javascript:void(0)"
Omit the href attribute completely, and style the link using CSS

See this question for more information.

How to make webpage not scroll to the top when data displayed on it changes

1 Answers1