If you want to implement a scroll trigger on click, one way is to create a directive for it. Simply add this directive as an attribute in your link, specifying the sref attribute as the ID of the target div.

app.directive('scrollTo', function() {
  return {
    link: function(scope, element, attrs) {
    element.bind('click', function() {
      var divPosition = $(attrs.sRef).offset();
      $('html, body').animate({
      scrollTop: divPosition.top
      }, "slow");

    });
   }
  };
});

Check out this Plunker example

With ui-router, there are no restrictions on the signature of your state object. This means you can easily add a property like so:

  .state('about.office', {
     url: "/about/office"
    ,templateUrl: "partials/about.html"
    ,scrollToId = "divAboutOffice";
  })

Your controller can then access this data by injecting the $state service.

  $('html, body').animate({
    scrollTop:  $($state.current.scrollToId).offset().top
  }, "slow");

If you included id="divAboutOffice" in your HTML, this code will work. You could wrap the animate() function inside an $on() for events like $locationChangeSuccess), $routeChangeSuccess, or $stateChangeSuccess depending on your requirements.

Additionally, you don't have to use the "id" method as shown. You can also make use of the existing ui-sref if you prefer searching for elements by attribute, such as $state.current.name.

To implement smooth scrolling on a webpage, I recommend creating a custom scrollTo directive using either window.scrollTo or a jQuery scrollTo Plugin.

For example, you can refer to this post on Stack Overflow for guidance: Angular directive to scroll to a given item that utilizes window.scrollTo.

Alternatively, you can explore the following jQuery scrollTo Plugins:

https://github.com/flesler/jquery.localScroll

https://github.com/flesler/jquery.scrollTo

Upon page loading, you can automatically scroll to a specific section based on the URL parameters, such as by using hashtags or other query strings. For instance: www.sample.com#aboutUs or www.samplecom?view=aboutUs

when scrolling, my tasks are:

1. Listen for "scroll" events,
2. Determine if I have reached the position of each header by using "element.offset().top"

(after converting these headers into a directive. (I should convert the headers into a directive, refer to how table of contents are created at ngtutorial.com/learn/scope)

3. Update location.url()

on page load (preferably using hashtags, as I can easily use $anchorScroll() or .when()), some examples of updating on load include:

1. http://ngtutorial.com/guide.html#/learn-filter.html
2. http://ngtutorial.com/learn/route.html#/_tblcontents_5

If you dislike hashtags, location.url() parsing is an option.

In my personal application, I implement https://github.com/durated/angular-scroll for managing scrolling functionality and scroll spy features, rather than utilizing locationHash. While I have not personally tested this approach, I believe it will be effective.

To make use of this solution, you will need to assign specific item IDs to important div elements (indicating where the page should scroll to).

Next, create a state "about.stately" with a URL /about/:locale (note that in ui-router, stateParams do not necessarily have to be integers). In the controller for about.stately, follow the instructions provided in the angular-scroll readme:

var someElement = angular.element(document.getElementById('some-id'));
$document.scrollToElement(someElement, offset, duration);

Determine the element you wish to scroll to based on the $stateParams.locale in your controller. It is crucial to ensure that all child directives and components have loaded before initiating the scrolling process - you may need to use $evalAsync to achieve proper functionality. This should give you a basic understanding of how to use this feature.

My current approach is illustrated below:

var scrolled = false;

var listenToScroll = false;

$('.subsection').each(function(i) {
    var position = $(this).position();
    $(this).scrollspy({
        min: position.top,
        max: position.top + $(this).outerHeight(),
        onEnter: function(element, position) {
            if(element.id){
                if(listenToScroll) {
                    scrolled = true;
                    $state.transitionTo('about.'+element.id);
                }
            } else {
                if(listenToScroll) {
                    scrolled = true;
                    $state.transitionTo('about');
                }
            }
        }
    });
});

$scope.startListenToScroll = function() {       

    listenToScroll = true;
}

$scope.stopListenToScroll = function(){

    listenToScroll = false;
}

$scope.$on('$stateChangeStart', function(){

    $scope.stopListenToScroll();

});

$scope.$on('$stateChangeSuccess', function(){

    console.log(scrolled);

    if( !scrolled ) {
        var link = $state.current.name.split('.');
        if(link.length>1){
            var divPosition = $( '#' + link[1] ).offset();
            $('body').stop(true,true).animate({ scrollTop: divPosition.top }, "fast", function(){
                $scope.startListenToScroll();
                scrolled = false;
            });
        } else {
            $('body').stop(true,true).animate({ scrollTop: 0 }, "fast", function(){
                $scope.startListenToScroll();
                scrolled = false;
            });
        }
    } else {
        $scope.startListenToScroll();
        scrolled = false;
    }

});

Instead of relying on clicks, I utilize the stateChangeSuccess event to handle state changes effectively and consistently, regardless of their origin.

To prevent unintended state changes during scrolling animations, scrollspy is disabled at the onset of a state change and reactivated upon completion of the animation.

The stateChangeSuccess event covers page load scenarios, ensuring seamless functionality when URLs are pasted directly into the browser.

A key variable named scrolled tracks user-initiated state changes triggered by scrolling, avoiding redundant scrollTop animation in such cases.

What are your insights on this approach?

To achieve the desired effect, consider implementing a directive at the top of the page that monitors the state changes and scrolls to the appropriate anchor point. This eliminates the necessity for using templateUrls as it aims to provide a smoother user experience.