If I have a one level route, then the hash links work as expected with no rerouting. However I have some urls that are country/kh and if I try using hash tags such as country/kh#projects, the page reroutes, which is very annoying.
So, if im on page countries and click the link #developing, then the page will scroll to #developing without rerouting, which is desired. If I'm on page country/kh and I click #projects, the page will reroute, then scroll to #projects; I don't want the rerouting to occur.
The issue only occurs for links of the nature page1/parameter#anchor, not for simple pageA#anchor.
It is very difficult to answer your question without any code samples or a plunker. I implemented a plunker code ( http://plnkr.co/edit/oflB21?p=preview ) to try to reproduce this issue but as you can see I could not reproduce the issue. i.e. You can easily navigate back and forth between two different sections of the page, e.g. between #/Country/Italy#Section-4 and #/Country/Italy#Section-1, without any page load or reroute. Please check out my working example at the following plunker. This most probably is happening to you due to a missing hash bang or forward slash or details like that.
HTML snippet for the home page:
<ul>
<li><a href="#/Country">Go to /Country</a></li>
<li><a href="#/Country/US">Go to /Country/US</a></li>
<li><a href="#/Country/Italy#Section-4">Go to /Country/Italy#Section-4</a></li>
<li><a href="#/Country/Canada#Section-8">Go to /Country/Canada#Section-8</a></li>
</ul>
HTML snippet for the country page:
<div id="Section-1" class="section pink">
Section 1
<div ng-if="country">
<a ng-href="#/Country/{{country}}#Section-8">Go to /Country/{{country}}#Section-8</a>
</div>
<div ng-if="!country">
<a ng-href="#/Country#Section-8">Go to /Country#Section-8</a>
</div>
</div>
All the JavaScript code:
var app = angular.module("app", ["ngRoute"]);
app.config(["$routeProvider", "$locationProvider",
function ($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl: "./home-page.html",
caseInsensitiveMatch: true,
})
.when("/Home", {
templateUrl: "./home-page.html",
caseInsensitiveMatch: true,
})
.when("/Country", {
templateUrl: "./country-page.html",
caseInsensitiveMatch: true,
})
.when("/Country/:country", {
templateUrl: "./country-page.html",
caseInsensitiveMatch: true,
})
}]);
countryController.$inject = ["$scope", "$routeParams", "$location", "$anchorScroll"];
function countryController($scope, $routeParams, $location, $anchorScroll) {
$scope.country = $routeParams.country;
if (!!$location.$$hash) {
$location.hash($location.$$hash);
$anchorScroll();
}
}
Alright, I believe the main issue is that Angular handles routing with hashes (sometimes). What you need to do is use the $anchorScroll
service. So your JS would look something like:
function ScrollCtrl($scope, $location, $anchorScroll) {
$scope.gotoBottom = function (){
// set the location.hash to the id of
// the element you wish to scroll to.
$location.hash('bottom');
// call $anchorScroll()
$anchorScroll();
};
}
And then your HTML could be:
<div id="scrollArea" ng-controller="ScrollCtrl">
<a ng-click="gotoBottom()">Go to bottom</a>
<a id="bottom"></a> You're at the bottom!
</div>
http://plnkr.co/edit/De6bBrkHpojgAbEvHszu?p=preview - this is a plunkr (not mine) that demonstrates using $anchorScroll if you need to see it in action
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With