Как определить положение прокрутки страницы с помощью jQuery

Question

Как определить положение прокрутки страницы с помощью jQuery

у меня возникли проблемы с функциональностью jQuery на моем сайте. Что он делает, так это то, что он использует window.scroll() функция для распознавания, когда windows изменяет свое положение прокрутки и при изменении вызывает несколько функций для загрузки данных с сервера.

проблема .scroll() функция вызывается, как только есть даже небольшое изменение в положении прокрутки и загружает данные в нижней части; однако то, что я хочу достичь, это загрузить новые данные, когда положение прокрутки / страницы достигает в нижней части, как это происходит для ленты Facebook.

но я не уверен, как определить положение прокрутки с помощью jQuery?

function getData() {

  $.getJSON('Get/GetData?no=1', function (responseText) {

    //Load some data from the server

  })

};



$(window).scroll(function () {

    getData();

});

702 7

jQuery javascript scroll

7 ответов:

Comments

Ничего не найдено.

Konstantin Dinev · Accepted Answer · 2018-06-30 14:53:47

вы можете извлечь положение прокрутки с помощью jQuery .scrollTop() метод
$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    // Do something
});

David Freitag · Accepted Answer · 2013-07-03 09:39:18

вы ищете

108

2013-07-03 09:39:18

yeyene · Accepted Answer · 2013-07-03 10:03:35

проверьте здесь демо http://jsfiddle.net/yeyene/Uhm2J/

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();
   }
});

safeer008 · Accepted Answer · 2014-01-07 07:18:07

$(window).scroll( function() { 
 var scrolled_val = $(document).scrollTop().valueOf();
 alert(scrolled_val+ ' = scroll value');
});
Это еще один способ получить значение прокрутки.

Andaeiii · Accepted Answer · 2015-07-28 15:23:24

теперь это работает для меня...
$(document).ready(function(){

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

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

})
он работает хорошо... а затем вы можете использовать JQuery/TweenMax для отслеживания элементов и управления ими.

Mauricio Ferraz · Accepted Answer · 2015-04-14 22:01:13

сохранить значение прокрутки как изменения в HiddenField, когда вокруг обратной передачи извлекает значение и добавляет прокрутку.

//jQuery

jQuery(document).ready(function () {

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

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

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

prm.add_endRequest(function () {

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

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

//Page Asp.Net
<asp:HiddenField ID="hidScroll" runat="server" Value="0" />

Ferhat KOÇER · Accepted Answer · 2018-04-16 18:03:59

Вы можете добавить все страницы с таким кодом:

JS код:

 /* 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 */

CSS-КОД

/*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;
}