CODEWITHSUNDEEP
javascripthtmlangularjs
Gavrilo Adamovic
Gavrilo Adamovic

Reputation: 2795

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

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.

Upvotes: 0

Views: 52

Answers (1)

alexhughesking
alexhughesking

Reputation: 2007

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

Upvotes: 1

Related Questions