Question

我正在使用angular创建一个网站，我希望能够点击特定元素并使页面顺利向下滚动到特定的div。它现在不能正常工作，我不确定我的设置中是否遗漏了这些内容。

我已经完成了bower install angular-scroll --save-dev，它成功地将angular-scroll文件夹添加到我的bower_components中，并且依赖于我的bower.json文件。

我已将行<script src="bower_components/angular-scroll/angular-scroll.js"></script>添加到我的index.html文件中。

现在两个相关元素（我要点击的那个和我要滚动的那个）看起来像：

<a du-smooth-scroll="mainContent" du-scrollspy>Scroll down</a>
...
<div id="mainContent"> ... </div>

（我在我的<a></a>标签中没有使用href =“＃mainContent”，因为当我这样做时，它似乎弄乱了我的网址，试图在其末尾添加“mainContent”）

任何想法可能出错？

Answer 1

您应该使用<a href="mainContent" du-scrollspy>Scroll Down</a>并处理哈希问题，

angular.element('a[href*=#]').click(function(event){ event.preventDefault(); });

这会侦听click事件并调用preventDefault来阻止浏览器设置哈希值。

Answer 2

这是你想要的工作样本我相信:)

＆＃13;

var app = angular.module('plunker', []);
app.controller('HeaderCtrl', function($scope) {
});

app.service('anchorSmoothScroll', function(){
    
    this.scrollTo = function(ID) {
		// This scrolling function 
        // is from http://www.itnewb.com/tutorial/Creating-the-Smooth-Scroll-Effect-with-JavaScript
        var startY = currentYPosition();
        var stopY = elmYPosition(ID)-110; //value to set where is the end point to stop. Top margin 160px;
        var distance = stopY > startY ? stopY - startY : startY - stopY;
        if (distance < 100) {
            scrollTo(0, stopY); return;
        }
        var speed = Math.round(distance / 100);
        if (speed >= 20) speed = 20;
        var step = Math.round(distance / 100); //adjust the scrolling speed.
        var leapY = stopY > startY ? startY + step : startY - step;
        var timer = 0;
        if (stopY > startY) {
            for ( var i=startY; i<stopY; i+=step ) {
                setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
                leapY += step; if (leapY > stopY) leapY = stopY; timer++;
            } return;
        }
        for ( var i=startY; i>stopY; i-=step ) {
            setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
            leapY -= step; if (leapY < stopY) leapY = stopY; timer++;
        }
        
        function currentYPosition() {
            // Firefox, Chrome, Opera, Safari
            if (self.pageYOffset) return self.pageYOffset;
            // Internet Explorer 6 - standards mode
            if (document.documentElement && document.documentElement.scrollTop)
                return document.documentElement.scrollTop;
            // Internet Explorer 6, 7 and 8
            if (document.body.scrollTop) return document.body.scrollTop;
            return 0;
        }
        
        function elmYPosition(ID) {
            var elm = document.getElementById(ID);
            var y = elm.offsetTop;
            var node = elm;
            while (node.offsetParent && node.offsetParent != document.body) {
                node = node.offsetParent;
                y += node.offsetTop;
            } return y;
        }

    };
    
});
app.controller('ScrollCtrl', ['anchorSmoothScroll', '$location', '$scope',
  function (anchorSmoothScroll, $location, $scope) {
    $scope.gotoStep = function(x) {
      var newHash = 'step' + x;
      if ($location.hash() !== newHash) {
		
		 $location.hash('step' + x);
		 anchorSmoothScroll.scrollTo('step' + x);
      } else {
        //$anchorScroll();
		anchorSmoothScroll.scrollTo('step' + x);
      }
    };
	
  }
]);

＆＃13;

/* Put your css in here */

nav{
  position:fixed;
}

＆＃13;

<!DOCTYPE html>
<html  ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
    <script src="app.js"></script>
  </head>

  <body>
   <nav class="navbar navbar-default sidebar" role="navigation" ng-controller="ScrollCtrl">
			<div class="container-fluid">
			<div class="collapse navbar-collapse">
			  <ul class="nav navbar-nav">
				<li id="doc1"><a href="" ng-click="gotoStep(1)"><span>one</span><span class="badge" style="float:right;">1</span></a></li>
			 	<li id="doc2"><a href="" ng-click="gotoStep(2)"><span>two</span><span class="badge" style="float:right;">2</span></a></li>
			  <li id="doc3"><a href="" ng-click="gotoStep(3)"><span>three</span><span class="badge" style="float:right;">3</span></a></li>
			</ul>
			</div>
		  </div>
		</nav>
		<div id="step1" style="height:500px;background-color:red">
		  <p>i am one</p>
		</div>
		<div id="step2" style="height:500px;background-color:green">
		  <p>i am one</p>
		</div>
		<div id="step3" style="height:500px;background-color:blue">
		  <p>i am one</p>
		</div>
		</body>

</html>

＆＃13;

你也可以使用指令我也有解决方案。请找到工作片段。如果有帮助，请告诉我。

Answer 3

我知道这是一个老问题，但对于现在遇到此问题的任何人来说，角度滚动的1.0.1版本刚刚发布并且已经破坏了某些人的东西。要解决此问题，请转到bower.json文件并为angular-scroll版本指定“1.0.0”（ not “~1.0.0”）。

角度滚动不工作...缺少什么？

3 个答案: