angular-滚动不工作...缺少什么？

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" 因为当我这样做时，它似乎与我的 url 混淆，试图添加 "mainContent"到最后）

知道可能出了什么问题吗？

Answer 1

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

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

这会监听点击事件并调用 preventDefault 来阻止浏览器设置哈希。

Answer 2

我相信这是您想要的工作示例 :)

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);
      }
    };
 
  }
]);

/* Put your css in here */

nav{
  position:fixed;
}

<!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>

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

Answer 3

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

angular-滚动不工作...缺少什么？

angular-scroll not working...something missing?

javascript

angularjs

smooth-scrolling