2013-01-04 322 views
-1

我正在尝试使它在我处于页面顶部时<DIV>不可见,但每当我滚动到它时,都会弹出一个链接,直接返回到页面顶部页。使用JavaScript会更容易吗?还是有一种方法可以只使用HTML?隐藏div直到滚动

+1

看起来你想创建一个初始隐藏的“返回顶部按钮”,并且有很多涵盖该部分的问题/答案。 –

+0

我已经回到顶部的链接,我试图找出如何使它在滚动时可见,而不是始终可见使用位置:固定。 – Guchie

+1

你不能用JUST HTML和CSS来做到这一点... JavaScript需要用来确定页面已经滚动。 – rlemon

回答

4

那么没有办法(我知道)做到这一点没有Javascript。

假设HTML这样的:

<button id="top">Top</button> 

您可以使用下面的代码:

$(window).scroll(function() { // when the page is scrolled run this 
    if($(this).scrollTop() != 0) { // if you're NOT at the top 
     $('#top').fadeIn("fast"); // fade in 
    } else { // else 
     $('#top').fadeOut("fast"); // fade out 
    } 
}); 

$('#top').click(function() { // when the button is clicked 
    $('body,html').animate({scrollTop:0},500); // return to the top with a nice animation 
}); 

您仍然可以使用“的位置是:固定”在这里,因为没有知名度,用户无法看到或点击。

+0

我试过这个,但它似乎只贴在顶端的右上角,似乎并没有隐藏它。它在这里:http://cielprince.tumblr.com – Guchie

+0

你把它放在右上角:P我会看看其余的代码。 '#top {position:fixed; top:0px; right:0px; z-index:-999px; }' – rlemon

+0

好的,我无法找到JS代码去与我给你的HTML ...是甚至在那里? – rlemon