Отображение div после прокрутки не работает

0

Я хочу показать "go to top" div после прокрутки 150 пикселей, но я действительно не знаю, как... Я пробовал много скриптов и ничего не работает. Это мой HTML:

<div id="goto_top" onClick="gotoId('top')" title="Иди на врх"></div>

JS:

$(document).scroll(function () {
   var h = $(this).scrollTop();
   if (h > 150) {
       $('#goto_top').fadeIn();
   } else {
       $('#goto_top').fadeOut();
   }
});

CSS:

#goto_top{
     position: fixed;
     background:url(../images/goto_top.png) transparent no-repeat;
     background-position: top center;
     padding:5px;
     width:35px;
     height:25px;
     bottom:40px;
     right:50px;
     cursor: pointer;
}

#goto_top:hover, #goto_top:active{
     background-position: bottom center;
}


В чем проблема?

Теги:
scroll
show

2 ответа

0
Лучший ответ

Я создал образец здесь: jsfiddle.net/6eF9g/1/

$(window).scroll(function () {
    if ($(window).scrollTop() >= 150) {
        $(".gotoTop").fadeIn();  
    } else {
        $(".gotoTop").fadeOut(); 
    }
});

$(".gotoTop").hide();

$(".gotoTop").click(function () {
    $("body,html").animate({
        scrollTop: 0
    }, 600);
    return false;
});
Поделиться
  • 0
    Опять же ... это не работает, поэтому я скопировал ваш код в новые файлы, но он не работает ни в новых файлах, ни в старых. Я не знаю в чем проблема.
  • 0
    это необходимо для JQuery и документ готовы функции
Показать ещё 3 комментария
0

Попробуйте изменить $ (документ) на $ (окно). Кроме того, вы должны изучить функцию debouncing, которая полезна для таких ситуаций, когда вам нужно проверить какую-то позицию прокрутки, но вы не хотите, чтобы она делала это постоянно и мгновенно, так как она накладывает много накладных расходов на браузер, Вы можете отбросить эту функцию на 100 мс, и она все равно будет казаться довольно мгновенной для пользователя, одновременно уменьшив накладные расходы браузера в процессе.

http://underscorejs.org/#debounce

Поделиться
  • 0
    Я только что попробовал $ (окно) вместо $ (документ), и он не работает. Спасибо за обсуждение, я попробую это.

Ещё вопросы

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