新手问题 “返回顶部” 怎样才能不刷新页面且不显示链接地址变化?

chairy11 · 2013年11月30日 · 最后由 chairy11 回复于 2013年12月01日 · 4420 次阅读

额,问个小白问题: 貌似我

<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()

难道没抄对?

href="#top" 页面顶部需要有一个类似

的东西

改成这样 href="javascript:void(0)" ,就 OK 了

#1 楼 @twm 你这个不对吧?那就变成了http://localhost:3000/#top,我试过了啊

#2 楼 @LiKour 链接地址这样写?怪怪的……

#3 楼 @chairy11 #锚点实现的都会在当前url上面加 # 锚字符,但不会改变你的 url 才对。

#5 楼 @twm 但你看 ruby-china 的 “返回顶部” 点击了就没有加上 # 啊

#6 楼 @chairy11 它是 javascript 实现不是锚点了

window 对象好像有个 scrollTo 方法

至于你说的点击以后地址栏后面多了 # 号,那是因为你的 a 标签的 href 属性指定的

回到顶部的功能简单的做法就是用 anchor 的方法:制定href='#xxx',在页面顶端写一个空的<div id='xxx'就可以了。如果不想在地址栏显示 #xxx 可以用 2 楼的做法

<a href="javascript:scroll(0,0)" class="to-top">TOP</a>

简单的话可以这样。

不用 anchor 就只能用 JS scroll event 了

#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;
});

目测没起作用 打开 console 看下有没报错?

#17 楼 @krazy 呐,还不太懂看,反正点开 console 显示一行 “event.returnValue is deprecated. Please use the standard event.preventDefault() instead. ”

#18 楼 @chairy11

$("a.to_top").click (e) ->
  e.preventDefault()
  $('html, body').animate({ scrollTop: 0 },300)
  return false

试试? 搜了下好像是新版 chrome 导致的

#19 楼 @krazy 貌似没啥变化……

#21 楼 @krazy 算了,先不管了,也许过阵子我知识更丰富一点回头看就迎刃而解了……谢谢了:)

你们这群搞 ruby 的讨论 JS 时就不知道开个 jsbin 吗? http://jsbin.com/ubitOyEX/1/edit

页面刷不刷新和浏览器有关,Chrome 不会刷新, IE 嘛,有几个版本会。具体版本忘了,很久没碰 IE 了。 想要阻止刷新就取消默认事件,return false 可以做到这一点,不过副作用就是页面不会滚到顶部了。 这个时候你只能求助 JS 了。 现在你知道为什么 IE 是个坑了吧。

中文乱码了,换个英文的 http://jsbin.com/ubitOyEX/2/edit

写 href="javascript:void(0)" 就行,这样哪儿怪怪的,你在每一个网站都能看到这么写

看了回答,本社区的前段水平真不是一般的差啊。。

#26 楼 @xlaok 问题其实是为什么脚本没生效 不是怎么返回顶部…

#26 楼 @xlaok 哪有,我随手打开几个网站,没见这么写的……

#27 楼 @xlaok 也许是我问题提得不好……而且很多高手没兴趣回答这么小白的问题嘛……

#25 楼 @frank_128 貌似是个好东西,但我没看懂…… 除了

<div id=top>我是顶部</div>
<a href="#top">回到顶部</a>

没啥了。 但我之前这么做了,链接地址会出现http://localhost:3000/#top的哦……

http://jsbin.com/ijoWOwIJ/2/edit

预览

http://jsbin.com/ijoWOwIJ/2

点击链接更新 url 是浏览器的默认行为,关键就是用 event.preventDefault() 取消掉浏览器默认行为。return falsehref="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()

可还是没解决问题,一切怪怪的……比如在一页内,有时也还显示 “返回顶部” 按钮…… 要不我还是先放一放好了,可能是我哪块知识有漏洞,别的什么原因……

#33 楼 @chairy11 我看过你很多帖子了,老是 “这个看不懂……以后再算吧”,总挑缓坡天黑都不一定能上到山顶。有问题多调试,删掉无关代码看是不是相互干扰。

你这个好像是另一个问题了吧,$(window).scrollTop() 是个像素值,只要滚动一像素就触发啊。

#34 楼 @Rei 哦……额……你教训得对……

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册