Tag: scrolltop
jQuery scrollTop跨浏览器不一致
在Chrome和Safari中， $(“body”).scrollTop(1000)在预期的位置。 在IE和FF中，没有任何反应。 在IE和FF中， $(window).scrollTop(1000)可以工作，但是它们会转到不同的地方。 它也可以在Chrome和Safari中使用，但它们也可以在不同的地方使用。 它们似乎高达300-500像素。 是否有任何一致的方法来设置跨浏览器工作的scrollTop属性，如果没有，为什么jQuery不抽象这个？ 我也想为它制作动画，这在Chrome和Safari中运行良好，但在其他浏览器中则无效。 我是浏览器检测的唯一选择吗？ （不好的做法）还是有更好的方法？
获取具有溢出的div的高度：auto;
我有一个高度为div：100px和overflow：auto内容是动态的。 我想滚动底部的div 我试过了 $(“#chat_content”).scrollTop($(“#chat_content”).height()); 但是如果内容大于100px $（“＃chat_content”）。height（）返回100并且div不在底部滚动 我能怎么做？ 谢谢
jquery用页面滚动淡出div
我正试图在页面向下滚动时淡出div（使用页面滚动 – 而不仅仅是fadeOut效果）。 我正在调整div的不透明度，因为页面在这里使用这段代码向下滚动： $(window).scroll(function() { var scroll = $(window).scrollTop(); $(‘.logo_container’).css({‘opacity’:( 100-scroll )/100}); }); 我的问题是，对我来说，它消失得太快，我想在用户滚动时更加微妙的淡入淡出。 任何人都可以想出一个更好的逻辑来做出更慢，更微妙的淡出。 这是一个显示我的代码的JSFIDDLE
通过scrollTop值缩小标题高度
Howdey！ 简单问题：我有一个固定的标题，高度根据window scrollTop -value缩小到其高度的一半。 到目前为止我所拥有的： HTML CSS body{padding-top:200%} /* not really needed */ #header { position:fixed; top:0; left:0; right:0; height:200px; color:#eee; background:#222 } #header img {height:100%; width:auto} JS var header = $(‘#header’), headerH = header.height(); $(window).scroll(function() { if ($(this).scrollTop() <= headerH / 2) { header.css({ height: -($(this).scrollTop() – headerH) }); } }).scroll(); 这是一个小提琴 。 到目前为止运作良好。 […]
ScrollTop在Chrome中真的很生涩
我正在使用scrollTop函数创建一个视差滚动网站，将scrollTop函数绑定到整个网站的不同锚点。 我遇到的问题是，Chrome中的滚动变得非常不稳定/不稳定，但在Firefox中它很好。 我的代码如下： $(‘.recipes’).click(function(){ $(‘html,body’).animate({ scrollTop: $(“.main1”).offset().top }, 1500); }); $(‘.cooking’).click(function(){ $(‘html,body’).animate({ scrollTop: $(“.main2”).offset().top }, 1500); }); 有可能有另一种方法来做到这一点，所以网站滚动不是生涩吗？ 也许我可以添加一个缓和function？ 编辑- 如果我删除了以下function，那么生涩似乎消失了，代码是否有问题，或者可能采用不同的方式编写代码？ var startY = $(‘#container’).position().top + $(‘#container’).outerHeight(); $(window).scroll(function(){ checkY(); }); function checkY(){ if( $(window).scrollTop() > startY ){ $(‘#backToTop, #navigation’).fadeIn(600); }else{ $(‘#backToTop, #navigation’).fadeOut(600); } } checkY(); 第二次编辑 $(document).ready(function(){ $(‘.recipes’).click(function(){ $.scrollTo(‘.main1’, 1500) }); $(‘.cooking’).click(function(){ $.scrollTo(‘.main2’, 1500) }); […]
获取dom容器中的滚动百分比
我有一个应用程序，内容应该在用户向下滚动时加载（如Twitter / Facebook …）。 我正在尝试根据滚动事件和当前滚动位置检测何时加载更多数据。 我读过这篇文章： https ： //stackoverflow.com/a/3898152/82609 if($(window).scrollTop() + $(window).height() == $(document).height()) { console.error(“bottom!”); } 这几乎可以工作，但在我的情况下，当我滚动到底部我有 $(window).scrollTop() + $(window).height() > $(document).height() 窗口滚动顶部+窗口高度如何大于高度？ 它不是那么大，只是一点点。 console.error(“$(window).scrollTop() + $(window).height()=”,$(window).scrollTop() + $(window).height(),” VS $(document).height()”,$(document).height()); // It gives me in the console: $(window).scrollTop() + $(window).height()= 877 VS $(document).height() 872 很多时候，当我完全滚动到底部时，我会得到一些来自无处的额外像素。 有人可以解释一下吗？ 我正在尝试计算容器中滚动内容的百分比： getScrollPercentage: function(scrollableElementSelector) { var scrollableElement = […]
动画jQuery scrolltop
我在jQuery中有一个scrollTop函数，但我无法为其设置动画。 可能吗？ $(“.loadmore”).click(function() { $(this).toggleClass(“up-arrow”, 1000); $(window).scrollTop($(‘.docs’).offset().top, 2000); });
在当前查看元素上方插入新部分时保持scrollTop（无毛刺）
这里有一个真正的JQuery UI天才：我们有一个非常长的forms，按需加载部分（例如，当点击索引/导航时，或当我们在当前部分的边缘滚动时）。 当我在当前查看的部分下面加载部分时，这不会影响当前滚动（即scrollTop）位置，但是当我在当前查看部分上方插入新部分时，它当然会将查看的内容向下推。 我们需要保持相对于当前部分的scrollTop位置。 我们还需要在进行调整时避免显示跳跃/毛刺。 我们正在考虑的选项： 加载内容并按加载项的高度调整scrollTop位置（这可能会因为DOM更改可能比scrollTop调整慢得多而出现故障）。 在屏幕外加载新部分，测量高度。 然后插入该部分并按该量调整scrollTop（由于DOM更新，可能仍然是故障）。 将要加载的部分设置为较大的固定高度（例如100/1000像素）并调整scrollTop以匹配，以便当前视图不会移动。 将内容加载到该部分，然后测量实际的新内容高度并移除固定高度，同时调整scrollTop以匹配实际高度。 不要使用传统的滚动，而是编写一个自定义滚动条，它保持自己的相对偏移并将现有的部分分开以适应新的部分。 然后问题就是编写自定义滚动条替换（对于像我们正在使用的nicescroll这样的东西）。 暂时将当前查看的部分的位置更改为绝对（从屏幕偏移计算的位置），以将其从流程中取出。 更新其后面的父滚动窗口内容，然后在重新计算新的scrollTop后再次使查看的部分相对。 还有什么我们没有想过的？ 我想要一些实际上必须解决这个问题的人提出一些建议。 重要的是屏幕不会出现故障，因此应避免将scrollTop同步到缓慢的DOM更新。 对拟议解决方案的建议或意见？ 是否有可以执行此操作的滚动替换？ 如果你无法解决它，但认为它值得解决，请考虑提升，这样我就可以获得大笔奖金！ 🙂
jQuery手风琴，将点击标签的开头滚动到顶部，如果展开的标签位于被点击的标签上方，则不起作用？
让我的jquery手风琴做我想做的事情有点问题。 我总是希望点击的标签从页面顶部滚动到固定数量的像素，我有点工作。 但是，只要活动选项卡位于单击的选项卡上方，并且页面已经向下滚动一点，单击选项卡的顶部和部分内容就会向上滚动超过页面顶部。 这就是我得到的： $(function() { $(“#accordion”).accordion({ autoHeight: false, collapsible: true, heightStyle: “content”, active: 0, animate: 300 }); $(‘#accordion h3’).bind(‘click’,function(){ theOffset = $(this).offset(); $(‘body,html’).animate({ scrollTop: theOffset.top – 100 }); }); }); 这是解释我的问题的小提琴 ， 例如，展开“第2部分”，向下滚动并单击“第3部分”选项卡，它们全部滚动到页面上，相反，它可以工作。 如果在打开一个新选项之前关闭活动选项卡它也可以正常工作，所以我假设这与崩溃选项卡的高度有关，这会使滚动到顶部function！？ 希望有人可以提供帮助，我可能会采取错误的方法。 我真的不知道我在做什么，因为我的jquery技能仅限于基本的切割理解！ ^^ 在此先感谢，所有的帮助和指针区域更受欢迎！ 🙂 干杯
jQuery window.scroll在相反方向上移动div垂直
我有一个div在页面滚动上向下滚动，当我向上滚动div时向上滚动。 我想反其道而行之 这是代码： // SCROLL BUTTON // — iPhone picture should scroll in when down and down when up jQuery(window).scroll(function(){ jQuery(“.iphonepic”).stop().animate({ “top”: (jQuery(window).scrollTop() – 0.00) + “px”}, “slow”); }); 因此，当您向下滚动时，div应垂直向上，与滚动方向不同。 小提琴演示： http ： //jsfiddle.net/khaleelm/sQZ9G/7/ 更新 我也想限制DIV不要高于-150px，尝试 if ( parseInt(jQuery(“.iphonepic”).css(“top”), 10) >= -150 ) {
