我有这个input元素:
<input type="text" class="textfield" value="" id="subject" name="subject">
然后我有一些其他元素,如其他文本输入,textareas等.
当用户点击它input时#subject,页面应滚动到页面的最后一个元素,并带有漂亮的动画.它应该是一个滚动到底部而不是顶部.
页面的最后一项是一个submit按钮,其中包含#submit:
<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">
动画不应该太快,应该是流畅的.
我正在运行最新的jQuery版本.我更喜欢不安装任何插件,但使用默认的jQuery功能来实现这一点.
我正在尝试自动滚动到 flexbox 容器中的一个元素。
<div class="nav">
<div class="items">
<div ng-repeat="i in items" scroll-on-click>
{{i}} click me to scroll to me!
</div>
</div>
</div>
app.directive('scrollOnClick', function() {
return {
restrict: 'A',
link: function(scope, $element) {
$element.on('click', function() {
$(".items").animate({scrollTop: $element.offset().top}, "slow");
});
}
}
});
它滚动到点击的第一个项目的顶部，但之后很难滚动。我在非 flexbox 容器中遇到了非常相似的事情。
这是一个plunk：
http://plnkr.co/edit/kq40NiTqBI81KlRJBLHu?p=preview
有任何想法吗？
当我正在观看相应的部分时,我尝试将导航栏对象设置为活动状态.换句话说:当滚动浏览我的页面(包含多个部分的单页)时,我正在观看的部分应该在导航栏中突出显示.
我已经通过指令得到了滚动位置.我失败的地方是在.nav ul li上触发ng-class.
<li class="" ng-class="{'active': $parent.scrollPos > document.getElementById('something').offset()}">
<a class="" ng-click="isCollapsed = true" href="#something" du-smooth-scroll>Something</a>
</li>
我使用时没有任何区别
ng-class="{'active': $parent.scrollPos > angular.element('#something').offset()}"
如何从任何元素的文档顶部获取距离？
非常感谢.
PS:我使用jQuery(不是精简版)!
编辑 如何工作(感谢@Sharikov Vladislav):在身体上我使用"PageCtrl":
<body id="page-top" class="index bg-default" ng-app="previewApp" ng-controller="PageCtrl">
看起来像那样:
angular.module('previewApp')
.controller('PageCtrl', function($scope, $element) {
$scope.scrollPos = 0;
$scope.getOffset = function (elementId) {
var element = $element.find(elementId);
return element.offset().top;
};
});
在身体后我使用跨度
<span scroll-position="scrollPos"></span>
初始化我的"scrollPosition"-directive,它允许我访问PageCtrl中$ scope.scrollPos上的当前滚动位置.指示:
angular.module('previewApp')
.directive('scrollPosition', function ($window) {
return {
scope: {
scrollPos: "=scrollPosition"
},
link: function (scope, element, attrs) { …我试图使用$ document.find获取html页面中元素的位置.但是,它总是未定义的.
这是我的代码.
angular.module('MyApp', []).
controller('myController', function($scope, $document) {
var element = $document.find('my_element');
console.log(element.prop('offsetTop'));
console.log(element.offsetTop);
});
这是html页面.
<div ng-app="MyApp" ng-controller="driversController">
<div id="my_element">Looping with ng-repeat:</div>
.......
</div>
我不想使用jquery和angularjs.P;轻松建议在angularjs.Thanks中这样做的方法