如何使用 angularjs 创建“转到顶部”[关闭]答案

【问题标题】：How to create a "Go to top" using angularjs [closed]如何使用 angularjs 创建“转到顶部”[关闭]
【发布时间】：2015-11-25 05:50:59
【问题描述】：

我想使用 angualrjs 创建一个“返回顶部”按钮。

1) 当页脚不可见时，按钮应为poisition: fixed; bottom: 0px

2) 当页脚变得可见时，“回到顶部”应该正好位于页脚的顶部

我尝试创建一个，但遇到了一些问题。

1) 当页面内容较少时，固定按钮与页脚位置重叠。

2) 有时在从服务器获取数据时，如果页面是使用 ng-epeat 填充的，那么按钮的位置是绝对的，我将不得不滚动以调整其位置。（我猜这是因为第二页脚的一小部分是可见的，所以位置变得绝对）

理想情况下，我想在页面加载后计算按钮的位置。我该怎么做。

这里是笨蛋http://plnkr.co/edit/IwViMJRnK2aqi8PNqT6n?p=preview

【问题讨论】：

标签： jquery angularjs html css

【解决方案1】：

你可以这样做：

CSS：

.goToTop
    {
        position: fixed;
        width: 100px;
        height: 40px;
        bottom: 0;
        right: 0;
        z-index: 100000;
        cursor: pointer;
        margin: 10px;
        -moz-opacity: 0.60;
        opacity: .60;
        filter: alpha(opacity=60);
    }

HTML：

<input type="button"  class="goToTop" value="Scroll Top" style="display:none;background-color:red"  />

JS：

 $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('.goToTop').fadeIn();
        } else {
            $('.goToTop').fadeOut();
        }
    });
    $('.goToTop').click(function () {
        $("html, body").animate({ scrollTop: 0 }, 1000);
        return false;
    });

当您从top滚动超过100px时会出现Scroll top按钮。您可以根据需要更改它。

FIDDLE DEMO

【讨论】：

【解决方案2】：

继续 Pawan 的回答，在 AngularJS 中，您可以像这样对范围函数进行 ng-click：

$scope.backToTop = function() {
    $("html, body").animate({ scrollTop: 0 }, 1000);
}

【讨论】：