zoukankan      html  css  js  c++  java
  • Angular关于$anchorScroll的定位滚动

    以下是实现定位滚动的代码:

    <!DOCTYPE html>
    <html lang="en" ng-app="app">
    <head>
        <meta charset="UTF-8">
        <title>定位滚动</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            ul{
                 200px;
                height: auto;
                position: fixed;
                top: 10px;
                right: 0;
            }
            li{
                height: 34px;
                line-height: 34px;
                text-align: center;
                border: 1px solid black;
                list-style: none;
            }
            div{
                 200px;
                height: 330px;
                border: 1px solid black;
                margin-top: 10px;
            }
        </style>
        <script src="angular.js"></script>
        <script>
            var app = angular.module('app',[]);
            app.controller('ctrl',function($scope,$location,$anchorScroll){
               $scope.arr = [1,2,3,4,5,6];
                $scope.show = function (id) {
                    $location.hash(id);
                    $anchorScroll();
                }
            });
        </script>
    </head>
    <body ng-controller="ctrl">
    <ul>
        <li ng-repeat="id in arr" ng-click="show('div'+id)">div{{id}}</li>
    </ul>
    <div ng-repeat="id in arr" id="div{{id}}">div{{id}}</div>
    </body>
    </html>
  • 相关阅读:
    HTML
    汉企,新的起点
    表格标签
    常用标签
    HTML
    我的未来规划
    世界首富如何炼成? 看盖茨20条箴言
    获取Java项目根目录 N多方法(转载)
    进程间通信——管道
    necessitas
  • 原文地址:https://www.cnblogs.com/4thmonth/p/7085870.html
Copyright © 2011-2022 走看看