额,问个小白问题: 貌似我
<a class="to_top" href="#" title="返回顶部" style="display: block;">
<i class="fa fa-angle-up fa-5x"></i>
</a>
点击了返回顶部按钮,它会刷新页面,地址栏变为http://localhost:3000/#,为什么呢?直接滚动到顶上不就行了? 还是说来个什么 onclick="return false;" 或者什么 preventDefault( ) 之类?
补充: 在 js 里是抄了 ruby-china 的啊
$("a.to_top").click () ->
$('html, body').animate({ scrollTop: 0 },300)
return false
$(window).bind 'scroll resize', ->
scroll_from_top = $(window).scrollTop()
if scroll_from_top >= 1
$("a.to_top").show()
else
$("a.to_top").hide()
难道没抄对?
回到顶部的功能简单的做法就是用 anchor 的方法:制定href='#xxx'
,在页面顶端写一个空的<div id='xxx'
就可以了。如果不想在地址栏显示#xxx 可以用 2 楼的做法
#8 楼 @tyaccp_guojian #9 楼 @bhuztez #13 楼 @galaxy_watcher 我在 js 里是抄了 ruby-china 的啊
$("a.to_top").click () ->
$('html, body').animate({ scrollTop: 0 },300)
return false
难道没起作用?
html # tag 是不会刷新页面的,默认一个 # 就是指没 tag, 就返回顶部. 你的页面会刷新应该是有别的问题导致的吧? 如果 onlick 有 return, #tag 就不会在地址栏显示。
$("a.go_top").click(function(){
$("html, body").animate({
scrollTop: 0
}, 300);
return false;
});
$("a.to_top").click (e) ->
e.preventDefault()
$('html, body').animate({ scrollTop: 0 },300)
return false
试试?搜了下好像是新版 chrome 导致的
页面刷不刷新和浏览器有关,Chrome 不会刷新,IE 嘛,有几个版本会。具体版本忘了,很久没碰 IE 了。 想要阻止刷新就取消默认事件,return false 可以做到这一点,不过副作用就是页面不会滚到顶部了。 这个时候你只能求助 JS 了。 现在你知道为什么 IE 是个坑了吧。
#25 楼 @frank_128 貌似是个好东西,但我没看懂…… 除了
<div id=top>我是顶部</div>
<a href="#top">回到顶部</a>
没啥了。 但我之前这么做了,链接地址会出现http://localhost:3000/#top的哦……
http://jsbin.com/ijoWOwIJ/2/edit
预览
点击链接更新 url 是浏览器的默认行为,关键就是用 event.preventDefault()
取消掉浏览器默认行为。return false
和 href="javascript:void(0)"
都是类似的,前者不如 event.preventDefault()
语义清晰,后者侵入式 HTML 不好看。
#32 楼 @Rei 哎呀,我实在不晓得,是不是我的 js 代码完全没发挥作用?反正我现在的 js 里是
$("a.to_top").click (e) ->
e.preventDefault()
$('html, body').animate({ scrollTop: 0 },300)
$(window).bind 'scroll resize', ->
scroll_from_top = $(window).scrollTop()
if scroll_from_top >= 1
$("a.to_top").show()
else
$("a.to_top").hide()
可还是没解决问题,一切怪怪的……比如在一页内,有时也还显示“返回顶部”按钮…… 要不我还是先放一放好了,可能是我哪块知识有漏洞,别的什么原因……