Довольно популярная тема о том, как сделать подобную кнопку. Плавность нужна скорее не для красоты, а для того, чтобы для посетителя сайта не было неожиданностью то место, где он после нажатия кнопки окажется.
Собственно сам код скрипта с использованием jQuery:
jQuery(function() {
jQuery("#js-smooth_scrolling").hide().removeAttr("href");
if (jQuery(window).scrollTop() >= "250")
jQuery("#js-smooth_scrolling").fadeIn("slow");
jQuery(window).scroll(function() {
if (jQuery(window).scrollTop() <= "250")
jQuery("#js-smooth_scrolling").fadeOut("slow");
else
jQuery("#js-smooth_scrolling").fadeIn("slow");
});
jQuery("#js-smooth_scrolling").click(function() {
jQuery("html, body").animate({ scrollTop: 0 }, "slow")
})
});
Все! Осталось создать блок с указанным идентификатором (в нашем случае
js-smooth_scrolling
), а также стилями задать как минимум свойство
position: fixed
,
Остальное зависит исключительно от вашей фантазии.