我正在尝试创建一个回到顶部的按钮,例如此示例(http://www.meanthemes.com/plugins/meanmenu/,向下滚动,您将查看右侧的返回顶部按钮),我似乎无法获得它工作。
当用户向下滚动至少20%的页面时,任何人都可以帮我向我展示如何创建一个并且仅触发按钮的显示。
谢谢。
答案 0 :(得分:1)
使用jquery scrollTop显示按钮。 这可能对您有所帮助。
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;
})
});
答案 1 :(得分:1)
您可以使用以下jQuery代码
$(document).ready(function() {
// Show or hide the sticky footer button
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$('.go-top').fadeIn(200);
} else {
$('.go-top').fadeOut(200);
}
});
// Animate the scroll to top
$('.go-top').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 300);
})
});
检查this tutorial了解更多信息
答案 2 :(得分:0)
<script>
function gotoTop()
{
$('body,html').animate({scrollTop: 0}, 800);
}
</script>
<a href=javascript:void(0); onclick=gotoTop();>Top</a>