使用js或jq控制一个div，当滚动到页面顶部的时候固定在顶部，离开可继续滚动吗？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用js或jq控制一个div，当滚动到页面顶部的时候固定在顶部，离开可继续滚动吗？相关的知识，希望对你有一定的参考价值。
参考技术A 代码：\\x0d\\x0a•$(function()\\x0d\\x0a\\x0d\\x0a•//获取要定位元素距离浏览器顶部的距离\\x0d\\x0a\\x0d\\x0a•var navH = $(".nav").offset().top;\\x0d\\x0a\\x0d\\x0a•//滚动条事件\\x0d\\x0a\\x0d\\x0a•$(window).scroll(function()\\x0d\\x0a\\x0d\\x0a•//获取滚动条的滑动距离\\x0d\\x0a\\x0d\\x0a•var scroH = $(this).scrollTop();\\x0d\\x0a\\x0d\\x0a•//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定\\x0d\\x0a\\x0d\\x0a•if(scroH>=navH)\\x0d\\x0a\\x0d\\x0a•$(".nav").css("position":"fixed","top":0);\\x0d\\x0a\\x0d\\x0a•else if(scroH滚动到AngularJS中的div顶部？
【中文标题】滚动到AngularJS中的div顶部？【英文标题】：Scroll to top of div in AngularJS? 【发布时间】：2014-07-25 07:30:31 【问题描述】：我正在将 AngularJS 用于小型 Web 应用程序，但遇到了问题。我正在使用ng-repeat 来填充 div 内的列表。 div 有一个固定的高度并设置为overflow-y: auto，这意味着当列表对于 div 来说太大时会出现一个滚动条。我的问题是，当重新绘制列表时，即支持 ng-repeat 的数据发生变化时，滚动条不会重置到 div 的顶部。相反，它会停留在 ng-repeat 更改之前滚动条所在的任何位置。这是一个非常糟糕的用户体验。我试过以下没有任何运气：
<div id="myList">
<ul>
<li ng-repeat="item in items">item</li>
</ul>
</div>
<a ng-click="switchItems()">Switch</a>
<script>
function MyApp($scope)
$scope.switchItems = function()
$('#myList').scrollTop();
$scope.items = [1, 2, 3, 4]; // new items
;
</script>
【问题讨论】：
【参考方案1】：我也遇到过同样的问题，我通常使用以下通用指令来解决它。它监听一个给定的事件，每当该事件发生时，它会将元素滚动回y = 0。您需要做的就是$broadcast 列表更改时控制器中的事件。
angular.module("ui.scrollToTopWhen", [])
.directive("scrollToTopWhen", function ($timeout)
function link (scope, element, attrs)
scope.$on(attrs.scrollToTopWhen, function ()
$timeout(function ()
angular.element(element)[0].scrollTop = 0;
);
);
);
用法：
// Controller
$scope.items = [...];
$scope.$broadcast("items_changed")
// Template
<div id="myList" scroll-to-top-when="items_changed">
【讨论】：
感谢您的回答。这是一个更完整的解决方案，但我想补充一点，在我的原始帖子中存在一种导致问题的类型。正确的 jQuery 命令应该是$('#myList').scrollTop(0); 注意0。
很好，您应该将其作为编辑添加到您的问题中，以便更明显:)
非常干净的解决方案，谢谢！当我使用您的指令时，Angular 1.2.28 出现以下错误：“指令未定义”。我设法通过返回一个包含链接函数的对象来解决它：angular.module("ui.scrollToTopWhen", []).directive("scrollToTopWhen", ['$timeout', function ($timeout) return link: function (scope, element, attrs) ... ]);【参考方案2】：
我只需添加一个监视 DIV 内容的指令。然后，只要内容发生变化，它就会滚动到顶部！此解决方案不需要事件处理（我认为这里没有必要）。
mod.directive('scrollToTop', function()
return
restrict: 'A',
link: function postLink(scope, elem, attrs)
scope.$watch(attrs.scrollToTop, function()
elem[0].scrollTop = 0;
);
;
);
然后，html 标记将使用该指令来触发滚动：
<div class='myList' data-scroll-to-top='data.items.length'>
<ul>
<li data-ng-repeat='item in data.items'>item</li>
</ul>
</div>
当您将项目添加到列表中时，DIV 将滚动到顶部！ 这是一个带有工作代码的jsFiddle： http://jsfiddle.net/pkgbtw59/89/
【讨论】：
【参考方案3】：我在表格正文滚动方面遇到了同样的问题。 我已经通过以下方式解决了。
这是我的示例 html。
<table id="rateplanmapping-scroll">
<thead>
<th></th>....
</thead>
<tbody >
<tr ng-repeat="data in datas"> //this is the data
<td></td>.....
</tr>
</tbody>
</table>
这是滚动到顶部的角度代码
<script>
angular.element("#rateplanmapping-scroll tbody")[0].scrollTop=0;
</script>
希望对你有帮助。 您可以将此脚本放在所需的功能中， 因此，当发生特定事情时，它会自动触发。要么 也可以附加到事件。
对于 div 元素，可以通过以下方式完成
http://plnkr.co/edit/0B4zrFTho6GYuPAS0S1A?p=preview
谢谢。
【讨论】：
这是一个 jQuery 答案而不是 Angular 答案。【参考方案4】：您也可以按照docs 使用 $anchorScroll
// set the location.hash to the id of
// the element you wish to scroll to.
$location.hash('bottom');
// call $anchorScroll()
$anchorScroll();
您需要将其包装在 $timeout 内：
$timeout(function()
$location.hash('myList');
$anchorScroll();
)
【讨论】：
以上是关于使用js或jq控制一个div，当滚动到页面顶部的时候固定在顶部，离开可继续滚动吗？的主要内容，如果未能解决你的问题，请参考以下文章