blocks|key|286625|text|可以使用jQuery的.scrollTop()方法提取滚动位置|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|286626|$(window).scroll(function+(event)+{
++++var+scroll+=+$(window).scrollTop();
++++//+Do+something
});|code-block|syntax|javascript|286627|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/scrollTop/^0|B|C|B|C|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@$9|V|A|W|1|X]]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

You can extract the scroll position using jQuery's <a href="http://api.jquery.com/scrollTop/" rel="noreferrer"><code>.scrollTop()</code></a> method

<pre><code>$(window).scroll(function (event) {
 var scroll = $(window).scrollTop();
 // Do something
});
</code></pre>

blocks|key|68689|text|您正在寻找window.scrollTop()函数。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|68690|$(window).scroll(function()+{
++++var+height+=+$(window).scrollTop();

++++if(height++>+some_number)+{
++++++++//+do+something
++++}
});|code-block|syntax|javascript|68691|entityMap^0|5|I|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

You are looking for the <code>window.scrollTop()</code> function.

<pre><code>$(window).scroll(function() {
 var height = $(window).scrollTop();

 if(height &gt; some_number) {
 // do something
 }
});
</code></pre>

blocks|key|286691|text|查看此处演示http://jsfiddle.net/yeyene/Uhm2J/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|286692|function+getData()+{
++++$.getJSON('Get/GetData?no=1',+function+(responseText)+{
 + +++++//Load+some+data+from+the+server
++++})
};

$(window).scroll(function()+{
+++if($(window).scrollTop()+%2B+$(window).height()+==+$(document).height())+{
+++++++alert("bottom!");
+++++++//+getData();
+++}
});|code-block|syntax|javascript|286693|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/yeyene/Uhm2J/^0|6|X|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Check here DEMO <a href="http://jsfiddle.net/yeyene/Uhm2J/">http://jsfiddle.net/yeyene/Uhm2J/</a>

<pre><code>function getData() {
 $.getJSON('Get/GetData?no=1', function (responseText) {
    //Load some data from the server
 })
};

$(window).scroll(function() {
 if($(window).scrollTop() + $(window).height() == $(document).height()) {
 alert("bottom!");
 // getData();
 }
});
</code></pre>

blocks|key|69270|text|$(window).scroll(+function()+{+
+var+scrolled_val+=+$(document).scrollTop().valueOf();
+alert(scrolled_val%2B+'+=+scroll+value');
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|69271|这是获取scroll值的另一种方法。|unstyled|69272|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>$(window).scroll( function() { 
 var scrolled_val = $(document).scrollTop().valueOf();
 alert(scrolled_val+ ' = scroll value');
});
</code></pre>

This is another way of getting the value of scroll.

blocks|key|69369|text|这对我很有效..。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|69370|$(document).ready(function(){

++++$(window).resize(function(e){
++++++++console.log(e);+++++++++++++++++++
++++});

++++$(window).scroll(function+(event)+{
++++++++var+sc+=+$(window).scrollTop();
++++++++console.log(sc);
++++});

})|code-block|syntax|javascript|69371|它工作得很好。然后，您可以使用JQuery/TweenMax来跟踪和控制元素。|69372|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Now that works for me... 

<pre><code>$(document).ready(function(){

 $(window).resize(function(e){
 console.log(e); 
 });

 $(window).scroll(function (event) {
 var sc = $(window).scrollTop();
 console.log(sc);
 });

})
</code></pre>

it works well... and then you can use JQuery/TweenMax to track elements and control them.

blocks|key|286778|text|当在PostBack周围时，将滚动的值作为更改存储在HiddenField中，检索该值并添加滚动。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|286779|//jQuery

jQuery(document).ready(function+()+{

++++$(window).scrollTop($("#<%25=hidScroll.ClientID+%25>").val());

++++$(window).scroll(function+(event)+{
++++++++$("#<%25=hidScroll.ClientID+%25>").val($(window).scrollTop());
++++});
});

var+prm+=+Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function+()+{

++++$(window).scrollTop($("#<%25=hidScroll.ClientID+%25>").val());

++++$(window).scroll(function+(event)+{
++++++++$("#<%25=hidScroll.ClientID+%25>").val($(window).scrollTop());
++++});
});

//Page+Asp.Net
<asp:HiddenField+ID="hidScroll"+runat="server"+Value="0"+/>|code-block|syntax|javascript|286780|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Store the value of the scroll as changes in HiddenField when around the PostBack retrieves the value and adds the scroll. 

<pre><code>//jQuery

jQuery(document).ready(function () {

 $(window).scrollTop($("#&lt;%=hidScroll.ClientID %&gt;").val());

 $(window).scroll(function (event) {
 $("#&lt;%=hidScroll.ClientID %&gt;").val($(window).scrollTop());
 });
});

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function () {

 $(window).scrollTop($("#&lt;%=hidScroll.ClientID %&gt;").val());

 $(window).scroll(function (event) {
 $("#&lt;%=hidScroll.ClientID %&gt;").val($(window).scrollTop());
 });
});

//Page Asp.Net
&lt;asp:HiddenField ID="hidScroll" runat="server" Value="0" /&gt;
</code></pre>

blocks|key|69458|text|您可以使用以下代码添加所有页面：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|69459|JS代码：|69460|+/*+Top+btn+*/
++++$(window).scroll(function()+{
++++++++if+($(this).scrollTop())+{
++++++++++++$('#toTop').fadeIn();
++++++++}+else+{
++++++++++++$('#toTop').fadeOut();
++++++++}
++++});
++++var+top_btn_html="<topbtn+id='toTop'+onclick='gotoTop()'>&#8593;</topbtn>";
++++$('document').ready(function(){
++++++++$("body").append(top_btn_html);
++++});
++++function+gotoTop(){
++++++++$("html,+body").animate({scrollTop:+0},+500);++++
++++}
++++/*+Top+btn+*/|code-block|syntax|javascript|69461|CSS代码|69462|/*Scrool+top+btn*/
#toTop{
++++position:+fixed;
++++z-index:+10000;
++++opacity:+0.5;
++++right:+5px;
++++bottom:+10px;
++++background-color:+#ccc;
++++border:+1px+solid+black;
++++width:+40px;
++++height:+40px;
++++border-radius:+20px;
++++color:+black;
++++font-size:+22px;
++++font-weight:+bolder;
++++text-align:+center;
++++vertical-align:+middle;
}|69463|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

You can add all pages with this code:

JS code:

<pre><code> /* Top btn */
 $(window).scroll(function() {
 if ($(this).scrollTop()) {
 $('#toTop').fadeIn();
 } else {
 $('#toTop').fadeOut();
 }
 });
 var top_btn_html="&lt;topbtn id='toTop' onclick='gotoTop()'&gt;&amp;#8593;&lt;/topbtn&gt;";
 $('document').ready(function(){
 $("body").append(top_btn_html);
 });
 function gotoTop(){
 $("html, body").animate({scrollTop: 0}, 500); 
 }
 /* Top btn */
</code></pre>

CSS CODE 

<pre><code>/*Scrool top btn*/
#toTop{
 position: fixed;
 z-index: 10000;
 opacity: 0.5;
 right: 5px;
 bottom: 10px;
 background-color: #ccc;
 border: 1px solid black;
 width: 40px;
 height: 40px;
 border-radius: 20px;
 color: black;
 font-size: 22px;
 font-weight: bolder;
 text-align: center;
 vertical-align: middle;
}
</code></pre>

blocks|key|69489|text|$('.div').scroll(function+(event)+{
+event.preventDefault()
+var+scroll+=+$(this).scrollTop();
+if(scroll+==+0){
+++alert(123)
+}
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|69490|此chat_boxes代码用于加载以前的消息|unstyled|69491|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>$('.div').scroll(function (event) {
 event.preventDefault()
 var scroll = $(this).scrollTop();
 if(scroll == 0){
 alert(123)
 }
});
</code></pre>

This code for chat_boxes for loading previous messages

I am having trouble with jQuery functionality on my website. What it does, is that it uses the <code>window.scroll()</code> function to recognize when the windows changes its scroll position and at the change calls a few functions to load data from the server.

The problem is the <code>.scroll()</code> function is called as soon as there is even a little change in the scroll position and loads data at the bottom; however, what I wish to achieve is to load new data when the scroll/page position reaches at the bottom, like it happens for Facebook feed.

But I am not sure how to detect scroll position using jQuery?

<pre><code>function getData() {
 $.getJSON('Get/GetData?no=1', function (responseText) {
 //Load some data from the server
 })
};

$(window).scroll(function () {
 getData();
});
</code></pre>

How to detect scroll position of page using jQuery

服务器

jQuery

我的网站上的jQuery功能有问题。它所做的是，它使用window.scroll()函数来识别窗口何时更改其滚动位置，并在更改时调用几个函数从服务器加载数据。问题是，只要滚动位置有一点变化，.scroll()函数就会被调用，并在底部加载数据；然而，我希望实现的是在滚动/页面位置到达底部时加载新数据，就像Facebook feed一样。但是我不确定如何使用jQuery来检测滚动位置？function

问如何使用jQuery检测页面滚动位置
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jQuery检测页面滚动位置EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jQuery检测页面滚动位置
EN