it-roy-ru.com

jQuery метод scrollTop () не работает

У меня есть следующий код JQuery

$(document).ready(function () {
    $('.navtoTop').click(function(){
           $("html").scrollTop( $("#topofthePage").offset().top );
    }); 
});

где 'navtoTop' - это класс кнопки (что-то вроде 'Back to top'), которая имеет фиксированную позицию в левом нижнем углу страницы, а 'topofthePage' - это идентификатор <div> в самой верхней части моей страницы.

Я даже попробовал это

$('.navtoTop').click(function(){
    $('html, body').animate({scrollTop : 0},800);
    return false;
});

Вот HTML-код

<body>
    <div id="topofthePage"></div>
    ...
    ...
    <img src="navtoTop.png" class="navtoTop">   
</body>

Я не знаю, что идет не так, но это не работает. Кто-нибудь объяснит и даст хорошее решение? 

Спроси мне детали кода, если хочешь.

6
MD Danish Ansari

Вы должны использовать window вместо html:

$(window).scrollTop( $("#topofthePage").offset().top );

Обратите внимание, что window не должен быть заключен в кавычки, поскольку это объект, а не тег.

9
taxicala

Распространенной проблемой scrollTo является переполнение для элемента "html, body" в css. Редко упоминается, когда возникают проблемы с прокруткой/анимацией элементов html/body и может привести к чрезмерной чрезмерной инженерии. 

Если необходимо установить переполнение, поместите его только в элемент body . Не оба HTML, тело.

Также хорошей привычкой является использование атрибута data- * вместо классов или идентификаторов в вашем html. Это дает вам привычку отделять стили от кода. Подумайте об этом, чтобы облегчить себе жизнь в будущем:

Создать повторно используемую функцию прокрутки

scrollioreceiver = function(sender) {

  $(sender).on({
    click: sentFrom
  });

  function sentFrom(){
    var dataMine = $(this).attr('data-sender'),
        dataSend = $('[data-receiver="'+dataMine+'"]');

    $('html, body').animate({
        scrollTop: $(dataSend).offset().top - 70
    }, 800, function() {
        // if you need a callback function
    });
  }
}

Создайте атрибуты данных для элементов html (data-name произвольно и должно иметь смысл):

ДОБАВИТЬ HTML-ССЫЛКУ

<a data-sender="ScrollToMatch">Link To Click To Scroll To Match Attribute</a> 

ДОБАВИТЬ ЭЛЕМЕНТ HTML

<div data-receiver="ScrollToMatch">Scrolls To This Element</div>

ПРОВЕРИТЬ CSS »Переполнение, добавленное к« html, body », не будет работать

body { overflow-x: hidden; }

INIT FUNCTION ON READY »Инициализировать в документе, готовом с селектором имени атрибута, чтобы создать гибкость при нескольких вызовах

scrollioreceiver('[data-sender]');

Надеюсь это поможет! 

3
CR Rollyson

Вы уже получили ответ по этому вопросу. Но, поскольку вы также хотите плавную прокрутку, рассмотрите следующую альтернативу:

$('.navtoTop').click(function(){
    $('html, body').animate({
        scrollTop: $('#topofthePage').offset().top
    }, 1000);
}); 
1
leo.fcx