为WordPress网站添加回到顶部按钮可以使用以下步骤:
function add_scroll_to_top_button() {
echo '<a href="#top" class="scroll-to-top"><i class="fa fa-chevron-up"></i></a>';
}
add_action('wp_footer', 'add_scroll_to_top_button');
.scroll-to-top {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
background: black;
color: white;
width: 50px;
height: 50px;
border-radius: 50%;
text-align: center;
line-height: 50px;
z-index: 9999;
}
.scroll-to-top:hover {
background: #666;
}
jQuery(document).ready(function($) {
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$('.scroll-to-top').fadeIn();
} else {
$('.scroll-to-top').fadeOut();
}
});
$('.scroll-to-top').click(function(e) {
e.preventDefault();
$('html, body').animate({scrollTop: 0}, 800);
});
});
这样,当用户向下滚动页面时,回到顶部按钮将会出现,当用户点击按钮时,页面将平滑滚动到页面的顶部。