表示されているデータが変更されたときに上部にスクロールしないようにする方法

Question

奇妙なタイトルで申し訳ありませんが、説明が見つかりませんでした。

私は1ページにソーシャルネットワークに似たコンテンツを持つspring webappを持っています。コントローラのangularjsには、表示する投稿を表示する配列があります。だからng-repeatと私はコントローラーにその配列の内容を表示しています。ページの下部には、（すべての可能な投稿を一度に表示したくないので）より多くの投稿をロードするボタンがあり、配列に新しい投稿を追加し、実際のページの更新と読み込まれた投稿を表示するリストを追加します。しかし、私は、ページの上部にブラウザのスクロールをより多くの投稿をロードするボタンをクリックすると、何とかトップへのスクロールを無効にする方法はありますか？

これは私のコードの短縮版です。

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]); 
      } 
     }); 
    } 

たび$scope.activitiesは、その変更が自動的にビューに表示され、変更されたが、それはまたトップにページをスクロールします。

Answer 1

<a href="#">は、ページの先頭に移動します。あなたのリンクからその動作を防ぐには、次の

• 使用href="#!"（!は、ページ上の任意の要素のidない場合）
• 使用href="javascript:void(0)"
• が完全href属性を省略するのいずれかを行うことができますCSSを使用してリンクのスタイルを設定してください。

詳細については、this questionを参照してください。