ScrollToTop не работает с jQuery(document).on('ready', function() {
Я пытаюсь загрузить свою функцию scrolltoTop() в dom ready, но событие не срабатывает. Не могли бы вы помочь мне?
Мой код здесь:
<button class = "scroll-top">
<i class = "fa fa-angle-up" aria-hidden = "true"></i>
</button>
:
"use strict";
function scrollToTop () {
if ($('.scroll-top').length) {
$(window).on('scroll', function (){
if ($(this).scrollTop() > 200) {
$('.scroll-top').fadeIn();
}
else {
$('.scroll-top').fadeOut();
}
});
$('.scroll-top').on('click', function() {
$('html, body').animate({scrollTop : 0},1500);
return false;
});
}
}
Вот моя готовая функция DOM:
jQuery(document).on('ready', function() {
(function ($) {
scrollToTop ();
})(jQuery);
});
Использование версии Jquery: jquery-3.4.1.min.js
scrollToTop() или scrollTop()?
—
12.06.2019 14:54
является ли srcollToTop() пользовательской функцией?
—
12.06.2019 14:56
@randomSoul Я обновил свой код, не могли бы вы проверить?
—
12.06.2019 15:08
@dwpu Я обновил свой код, не могли бы вы проверить?
—
12.06.2019 15:08
@DevsiOdedra Я обновил свой код, не могли бы вы проверить?
—
12.06.2019 15:09
ваша функция scrollToTop находится в отдельном файле? Если это так, попробуйте поставить jQuery ready после того места, где файл включен.
—
12.06.2019 15:14
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
7
709
3
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 3
Смотрите это демо. когда вы запускаете скрипт, он прокручивается вверх
jQuery(document).on('ready', function() {
$(window).scrollTop(0);
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style = "border:1px solid black;width:100px;height:150px;overflow:auto">
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</div><br>Из jquery документация, из версии 3.0
$( document ).ready(function() {
// Handler for .ready() called.
});
был заменен на
$(function() {
// Handler for .ready() called.
});
Возможно, попробуйте:
$(function() {
window.scrollTo(0,0);
});
Ответ принят как подходящий
использовать $(document).ready(function() {}
"use strict";
function scrollToTop() {
console.info('Calling');
if ($('.scroll-top').length) {
$(window).on('scroll', function() {
console.info($(this).scrollTop());
if ($(this).scrollTop() > 200) {
$('.scroll-top').fadeIn();
} else {
$('.scroll-top').fadeOut();
}
});
$('.scroll-top').on('click', function() {
$('html, body').animate({
scrollTop: 0
}, 1500);
return false;
});
}
}
$(document).ready(function() {
scrollToTop();
})<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class = "scroll-top">
<i class = "fa fa-angle-up" aria-hidden = "true"></i>
</button>Другие вопросы по теме
Столбец highcharts: динамически добавлять ряды с данными детализации
Отображение окна печати после диалога подтверждения
Как я могу определить маску ввода для цены с маской ввода jquery
Получите текст td и отправьте его на контроллер с помощью jQuery
Управление выпуском/блокировкой встречи в datetimepicker
Как перезагрузить функцию вызова ajax в заданное время
Uncaught TypeError: $(...).steps не является функцией
Повернуть значок «стрелка» FontAwesome, когда аккордеон активен
Обновлять текст элемента при изменении другого свойства элемента
Флажок становится снятым после фильтрации данных после нового просмотра. как остановить снятие флажка после фильтрации данных
Похожие вопросы
Как мне издеваться над импортом, который мой тестируемый класс делает с помощью шутки?
Столбец highcharts: динамически добавлять ряды с данными детализации
JavaScript обнаруживает клавишу воспроизведения/паузы на клавиатуре (виртуальную)
Как сделать более детальное масштабирование в сети vis.js?
Проблема с функциями Firebase и разница между .add() и .doc().set()
Как заставить мой сервер получать файл js вместо повторной загрузки html?
Как вызвать функцию на основе изменений в массиве, связанном с локальным хранилищем
Интерполяция строк с winston не работает в Nodejs
Как я могу определить маску ввода для цены с маской ввода jquery
Как комбинировать наблюдаемые неблокирующим образом?
пройти как
$(window).scrollTop(0)