Wie scrollt man zu einem bestimmten div, ohne die URL mit angular + ui router zu ändern?

Question

Ich habe zwei Panels, Hinflug und Hinflug. Sobald der Benutzer den Hin- und Rückflug ausgewählt hat, führt er eine Preisüberprüfung durch und zeigt sie am unteren Rand der beiden Felder an (der Fahrpreis).

Ich möchte in der Lage sein, zu den farePanel scrollen, sobald die ausgehenden und eingehenden aus dem Controller selbst ausgewählt ist, habe ich versucht mit $ anchorScroll, aber es fügt die ID #farePanel an die URL.

zusätzlich benutze ich ui-router, wenn das hilft.

Answer 1

alles, was Sie brauchen, ist mit plain javascript zu tun. Rufen Sie die Funktion window.scrollTo auf, nachdem Sie den Abstand vom oberen Rand des Fensters berechnet haben. Sie können eine Arbeits Geige siehe hier: https://jsfiddle.net/scyrizales/vj44Lumv/

angular.module("test", []) 
.controller("Ctrl1", function($scope, $timeout, $window) { 
    $scope.showFare = false; 
    $scope.process = function() { 
    $scope.showFare = true; 
    $timeout(function() { 
     var element = $window.document.querySelector("#fare"); 
     var distance = element.getBoundingClientRect().top; 
     $window.scrollTo(0, distance); 
    }); 
    } 
});