Scroll Top Jquery

0

Я сделал свиток наверху и прокручиваю вниз в jquery. В том, что я делаю, чтобы прокручивать, как с процентом. Например: если свиток сверху вниз составляет 50% он прокручивается сверху вниз, так как 50% он уже работает. Но теперь я хочу прокрутить 50%, если снова щелкнуть, затем прокрутить оставшиеся 50% до нижней части страницы. Я не уверен, как это сделать в jquery.

Вот сценарий. Любое предложение было бы замечательным. http://jsfiddle.net/TkYpY/

Спасибо, вики

  • 0
    Ваш вопрос не ясен - чего вы пытаетесь достичь? Кажется странным прокручивать 50% от общего расстояния за раз, так как вы никогда не достигнете ни вершины, ни низа.
  • 0
    В вашем jsfiddle даже верх и низ не работают. Рассматривали ли вы проверить scrollTo ? Это очень удобно и может вам очень помочь.
Теги:
scroll

4 ответа

1
Лучший ответ
$('#spnTop').on("click", function () {
var percentageToScroll = 50;
var percentage = percentageToScroll / 100;
var height = $(document).height() - $(window).height();
if(scrollAmount > 0 )
{
scrollAmount = scrollAmount - (height * percentage);
}

console.log('scrollAmount: ' + scrollAmount);
$('html,body').animate({
    scrollTop: scrollAmount
}, 'slow', function () {
    console.log("reached top");
});

});

var scrollAmount = 0;
$('#spnbottom').on("click", function () {
var percentageToScroll = 50;
var percentage = percentageToScroll / 100;
var height = $(document).height() - $(window).height();

 if(   scrollAmount < height)
 {
scrollAmount = scrollAmount + height * percentage;
 }
console.log('scrollAmount: ' + scrollAmount);
jQuery("html, body").animate({
    scrollTop: scrollAmount
}, 900);
});
Поделиться
1 
$('#spnTop').on("click", function () {
var percentageToScroll = 80;
var percentage = percentageToScroll / 100;
var height = $(document).scrollTop();
var scrollAmount = height * (1 - percentage);

console.log('scrollAmount: ' + scrollAmount);
$('html,body').animate({
    scrollTop: scrollAmount
}, 'slow', function () {
    console.log("reached top");
});

});

var scrollAmount = 0;
$('#spnbottom').on("click", function () {
var percentageToScroll = 50;
var percentage = percentageToScroll / 100;
var height = $(document).height() - $(window).height();
scrollAmount = scrollAmount + height * percentage;
console.log('scrollAmount: ' + scrollAmount);
jQuery("html, body").animate({
    scrollTop: scrollAmount
}, 900);
});
Поделиться
  • 0
    Я только что изменил две строки в вашем jsfiddle. var scrollAmount = 0; и scrollAmount = scrollAmount + высота * процент;
  • 0
    Спасибо @Girish Sakhare это работает. Можете ли вы сказать мне, чтобы сделать то же самое для снизу вверх?
Показать ещё 2 комментария
1

Я немного изменил вашу скрипку. Кажется мне какая-то проблема расчета. Вот твоя скрипка. Это то, что вам нужно?

Сначала объявите глобальную height переменной со значением по умолчанию.

В верхнем коде прокрутки замените var height = $(document).scrollTop(); с height -= $(document).height() - $(window).height();

и в нижней прокрутке замените эту var height = $(document).height() - $(window).height(); с height += $(document).height() - $(window).height(); ,

Поделиться
  • 0
    Я попробовал ваш код это то, что я хочу. Снизу вверх 30% - это прокрутка к вершине, и после повторного нажатия я перехожу наверх как 100%. Я хочу, чтобы это было 30% само по себе. Например, если я упомяну 20% процентов, значит, пять раз нажмите, чтобы достичь вершины. Надеюсь, вы поняли мою точку зрения Есть ли способ показать результат, как с
  • 0
    Вы можете использовать переменную, которая будет содержать указанные вами проценты, т.е. 20% или 30% или что угодно. Внутри функции вы можете добавить или вычесть эту переменную соответственно.
Показать ещё 3 комментария
1

Он не прокручивает второй клик, поскольку вы уже достигли прокрутки.

Если вы хотите прокрутить дальше, объявите var scrollAmount вне функции, и когда вы нажмете еще раз на нижнюю ссылку, вычислите следующую строку прокрутки с максимальным размером вашего документа и добавьте его в глобальный прокручиваемый объявленный var.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню