Scroll to Top of page (Smooth Scroll) using AngularJS

Last Reply 3 days ago By dharmendr

Posted 4 days ago

I have a page and when the user goes at the bottom, there is an icon, if the user clicks on that icon, the page must go to top automatically.

Note : The user must know that the page is moving top, so after clicking on that icon, it must scroll slowly to top.

Scroll to Top of page using anchorScroll and scrollTo in AngularJS

Its working according to the link, but the scrolling is faster, I need the scrolling speed to be slower when the user clicks on the icon.

Posted 3 days ago Modified on 2 days ago

Hi skp,

Unfortunately this is not possible using $anchorScroll. As $anchorScroll doesn't have any options and doesn't work with $ngAnimate.

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .BottomCorner
        {
            position: relative;
            bottom: 0;
            right: 0;
            cursor: pointer;
            background-color: #0090CB;
            display: inline-block;
            height: 40px;
            width: 40px;
            text-align: center;
            font-size: 20pt;
            line-height: 40px;
        }
    </style>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', []);
        app.controller('MyController', function ($scope, $window, $anchorScroll) {
            // Scroll to Bottom of Page.
            $window.scrollTo(300, 800);
            $scope.ScrollTo = function () {
                // Scroll to Top of Page.
                angular.element("html, body").animate({ "scrollTop": 0 });
            }
        });
    </script>
</head>
<body  ng-app="MyApp" ng-controller="MyController">
    This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
    This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
    This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
    This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
    This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
    This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
    This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
    This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
    This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
    This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
    This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
    This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
    This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
    This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
    <div class="BottomCorner">
        <a href="javascript:;" ng-click="ScrollTo()">&#x25B2;</a>
    </div>
</body>
</html>

Demo