JS特效第40弹：jQuery返回顶部插件弹性动画
以下是一个使用jQuery实现的返回顶部插件的简单示例，包含弹性动画效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Back to Top Plugin Example</title>
<style>
body, html {
height: 2000px;
}
#back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
cursor: pointer;
}
</style>
</head>
<body>
<img id="back-to-top" src="arrow-up.png">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
// When the scroll is higher than 500 viewport height, show the button
$(window).scroll(function() {
if ($(this).scrollTop() > 500) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
// When clicking the button, scroll to top in no time
$('#back-to-top').click(function() {
$('body,html').animate({scrollTop: 0}, 0);
});
});
</script>
</body>
</html>这段代码实现了一个简单的返回顶部按钮，当用户滚动页面超过500px时显示该按钮，并且点击按钮会立即返回页面顶部，没有使用任何动画库，保持了代码的简洁性。
评论已关闭