jQuery determines whether to browse to the bottom of the web page

This time I will bring you jQueryJQuery determines whether to browse to the bottom of the webpage. What are the precautions? Here are practical cases, let’s take a look. one time.

In some requirements, new content needs to be loaded when the user scrolls to the bottom of the browser. The author here introduces how to use Jquery to determine whether the user has browsed to the bottom of the web page.

Before understanding the following knowledge points, the author will introduce a few concepts here.

$(window).height(); //Used to get the height of the browser display area

$(window).width(); //Used to get the width of the browser display area

$(document.body).height(); //Get the height of the page document

$(document.body).width(); //Get the width of the page document

$(document).scrollTop(); //Get the vertical distance from the vertical scroll bar to the top

$(document).scrollLeft(); //Get the horizontal distance from the horizontal scroll bar to the left

Through the above knowledge points, you can know: the height of the browser display area, the distance from the vertical scroll bar to the top <= the height of the web page.

With this conclusion, it is easy to implement. The following code is implemented to determine whether the user has browsed to the bottom of the web page.

 $(window).scroll(function(){
 var h=$(document.body).height();//网页文档的高度
 var c = $(document).scrollTop();//滚动条距离网页顶部的高度
 var wh = $(window).height(); //页面可视化区域高度
 if (Math.ceil(wh+c)>=h){
  alert("我已经到底部啦");
 }
 })</p>
<p style="text-align: left;">
If you need to determine whether the user has browsed to a certain element, you only need to change the height of the web page document above to the distance between a certain element and the top of the web page. For example: </p>
<pre class="brush:php;toolbar:false"> $(window).scroll(function(){
 var h=$("#p").offset().top;//id为p的元素距离网页顶部的距离
 var c = $(document).scrollTop();//滚动条距离网页顶部的高度
 var wh = $(window).height(); //页面可视化区域高度
 if (Math.ceil(wh+c)>=h){
  alert("我已经到底部啦");
 }
 })

Readers need to note here that in the judgment condition, wh c is obtained as the smallest integer that is greater than or equal to this number. After the author's testing, there is no problem on IE7, 8, 9, and 11.

Next, the author encapsulates the above code into a plug-in.

(function ($) {
  //backcall是回调函数，count表示回调函数被执行的次数，count只有在元素通过滚动条滑出的时候才起作用
 $.fn.inBottom = function (backcall){
 //判断当前元素是否在目前屏幕可视化区域之内
 if(this.offset().top >= $(window).height()){
 this.inScroll(backcall,count);
 }else{
 this.inWindow(backcall);
 }
 };
 //直接加载回调函数
 $.fn.inWindow = function (backcall){
 backcall();
 };
 //滚动监听滑动条，元素滚动到屏幕底部的时候，加载回调函数
 $.fn.inScroll = function (backcall,count) {
  var $this=this;
 $(window).scroll(function(){
 //获得这个元素到文档顶部的距离
 var awayDocTop=$this.offset().top;
 //获得滚动条的top
 var sTop=$(document).scrollTop();
 //获得可视化窗口的高度
 var wh=$(window).height();
  if(Math.ceil(wh+sTop)>=awayDocTop){
  if(count>0){
  backcall();
  count--;
  }
 };
 });
 };
})(jQuery);

Then after readers introduce the above plug-in file, they can call it through code similar to the following.

$("#p").inBottom(function(){
 alert("我被回调了");
},1);

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

The above is the detailed content of jQuery determines whether to browse to the bottom of the web page. For more information, please follow other related articles on the PHP Chinese website!