Я ищу ресурсы, которые создают функции прокрутки, подобные тем, которые находятся на этих сайтах:
Журнал Outpost
Unfold
Как только полоса прокрутки попадет в нижнюю часть страницы, я хочу, чтобы она вернулась к вершине. Я знаком с бесконечным свитком, и это не то, что я хочу. Я также нашел скрипты, которые будут писать/добавлять один и тот же контент в нижней части страницы, но ни один из них не возвращается к началу страницы.
Попробуйте следующее:
$('document').ready(function() {
$(document).scroll(function(){
if(document.documentElement.clientHeight +
$(document).scrollTop() >= document.body.offsetHeight )$(document).scrollTop(0);
});
});
Здесь решение, которое создает дубликат тела, так что нижняя и верхняя части могут быть видны одновременно в определенной точке, чтобы переход был более плавным.
$('document').ready(function() {
// We need to duplicate the whole body of the website so if you scroll down you can see both the bottom and the top at the same time. Before we do this we need to know the original height of the website.
var origDocHeight = document.body.offsetHeight;
// now we know the height we can duplicate the body
$("body").contents().clone().appendTo("body");
$(document).scroll(function(){ // detect scrolling
var scrollWindowPos = $(document).scrollTop(); // store how far we have scrolled
if(scrollWindowPos >= origDocHeight ) { // if we scrolled further then the original doc height
$(document).scrollTop(0); // then scroll to the top
}
});
});
Если вы хотите бесконечную прокрутку в обоих направлениях, используйте
if (document.documentElement.clientHeight + $(window).scrollTop() >= $(document).height()) {
$(document).scrollTop(0)
} else if ($(window).scrollTop() < 0) {
$(document).scrollTop($(document).height())
}
(Я знаю, это поздний ответ, но он по-прежнему помогает пользователям, таким как я, просто такие вещи Google).
Ответ mrida заставлял мой браузер не прокручиваться, вот модифицированная версия, которая работала для меня:
$('document').ready(function() {
$(document).scroll(function(){
if (document.documentElement.clientHeight + $(window).scrollTop() >= $(document).height()) {
$(document).scrollTop(0);
}
});
});
Выйдя из ответа @clankill3r, создайте две копии тела, добавьте и добавьте к исходному телу, затем вы можете прокручивать страницу в двух направлениях бесконечно.
$('document').ready(function() {
var origDocHeight = document.body.offsetHeight;
var clone=$("body").contents().clone();
clone.appendTo("body");
clone.prependTo("body");
$(document).scroll(function(){
var scrollWindowPos = $(document).scrollTop();
if(scrollWindowPos >= origDocHeight ) {
$(document).scrollTop(0);
}
if(scrollWindowPos <= 0 ) {
$(document).scrollTop(origDocHeight);
}
});
});
Добавление цикла прокрутки назад, обновление @clankill3r ответа. Это должно быть что-то вроде этого.
$('document').ready(function() {
// We need to duplicate the whole body of the website so if you scroll down you can see both the bottom and the top at the same time. Before we do this we need to know the original height of the website.
var origDocHeight = document.body.offsetHeight;
// now we know the height we can duplicate the body
$("body").contents().clone().appendTo("body");
$(document).scroll(function(){ // detect scrolling
var scrollWindowPos = $(document).scrollTop(); // store how far we have scrolled
if(scrollWindowPos >= origDocHeight ) { // if we scrolled further then the original doc height
$(document).scrollTop(scrollWindowPos + origDocHeight); // then scroll to the top
} else if (scrollWindowPos == 0) { // if we scrolled backwards
$(document).scrollTop(origDocHeight);
}
});
});
Я использую его по горизонтали, и он работает нормально. Надеюсь, кто-то сочтет это полезным.
Это плохо работает для мобильных устройств, как мы можем улучшить это для мобильных устройств?
Все версии выше заставляют контент немного перескочить между scrollTop и событием scolling.
Кто-нибудь знает, почему это так гладко: Пример