angularJs通过服务 $anchorScroll()和 $location.hash()实现锚点滚动效果_angular内容区域滚动,锚点跟着滚动-CSDN博客

本文链接：https://blog.csdn.net/litingyuki/article/details/83796756

其中关于$location.hash();

例如 http://localhost:xxx//index.html?_ijt=5692t33a96k7a9lee2n02f6pjs##div6
#代表网页中的一个位置，#后边的部分就是该位置的标识符。浏览器读取这个URL后，会自动将div6位置滚动至可视区域。
详解见 http://www.ruanyifeng.com/blog/2011/03/url_hash.html

案例代码见下文。

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>通过服务 $anchorScroll()和 $location.hash()实现锚点滚动 </title>
    <style>

        ul{  width: 80px;height: auto;position: fixed;top: 0;right: 10px;}
        li{   height: 34px;line-height: 34px;text-align: center;border: 1px solid black;list-style: none;}
        div{width: 600px; height: 330px; border: 1px solid black;margin-top: 10px;margin-left: 250px; background-color: #2f96b4;}
    </style>

    <script src="../js/angular.min.js"></script>
    <script>
        var app = angular.module('app',[]);
        app.controller('ctrl',function($scope,$location,$anchorScroll){
            $scope.arr = [1,2,3,4,5,6];
            $scope.change = function (id) {

                $location.hash(id);
        //例如 http://localhost:xxx//index.html?_ijt=5692t33a96k7a9lee2n02f6pjs##div6
        //#代表网页中的一个位置。其右面的字符，#后边的部分就是该位置的标识符。浏览器读取这个URL后，会自动将div6位置滚动至可视区域。
//详解见 http://www.ruanyifeng.com/blog/2011/03/url_hash.html
                $anchorScroll();
            }
        });
    </script>
</head>
<body ng-controller="ctrl">
<ul>
    <li ng-repeat="id in arr" ng-click="change('div'+id)">div{{id}}</li>
</ul>
<div ng-repeat="id in arr" id="div{{id}}">div{{id}}</div>
</body>
</html>