Элемент «Вверх», который работает с всплывающим окном jQuery

Question

У меня есть список избранных jQuery, который открывается как всплывающее окно, потому что он так долго. Я хочу, чтобы в конце списка была кнопка «назад к началу». Я нашел this tutorial, который выглядит так, будто он должен делать трюк, за исключением того, что он не отображает текст «В начало», потому что я предполагаю, что он находится под всплывающим окном. Есть идеи, как обойти это? Или другая реализация решения «назад к началу»?

Answer 1

Перерыв по частям. <a href="#">Back to Top</a> автоматически разместит вас в верхней части страницы. Это не ракетостроение.

Затем вы можете добавить стиль с помощью CSS. В этом случае учебник использует класс «back to top». <a href="#" class="back-to-top">Back to Top</a>. Вы можете сделать это так, как хотите, неважно.

Однако я порекомендую вам сохранить этот бит кода, так как он его позиционирует. position: fixed; bottom: 2em; right: 0px;. В качестве примечания, замените position:fixed на position:relative, чтобы он появился во всплывающем окне.

Затем вы можете добавить приятные гладкие эффекты прокрутки или все, что захотите.

jQuery(document).ready(function() { 
var offset = 220; 
var duration = 500; 
jQuery(window).scroll(function() { 
    if (jQuery(this).scrollTop() > offset) { 
     jQuery('.back-to-top').fadeIn(duration); 
    } else { 
     jQuery('.back-to-top').fadeOut(duration); 
    } 
}); 

jQuery('.back-to-top').click(function(event) { 
    event.preventDefault(); 
    jQuery('html, body').animate({scrollTop: 0}, duration); 
    return false; 
}) 
}); 

Скажите, как это происходит. Привет, Себастьян.