点击<a>标签,禁止页面自动跳到顶部的解决办法

     最近在开发一个小web的时候想给一个按钮增加一个弹出dialog功能,但是发现点击按钮后页面总是自动滚动至顶部,这点从用户体验上来讲是极其不爽的,于是开始跳进google大池寻求解决办法。网上的办法有很多,但是唯独下面这个生效了,转来收藏。

 

    "平时开发的HTML表单,链接通常会使用<a href="#" οnclick="openWnd();">Open new window</a>控件,但这种方法如果是链接到本页面,用来执行一段JS脚本的话,我们一般不希望用户在点解链接后页面滚动到顶部(如果有滚动条的话),可以通过修改上述将链接属性href来实现:即将href="#"改为href="###",这样用户点击链接执行JS脚本后,滚动条就不会自动跳到TOP了。"

 

     后来就想为什么这么改了就不跳了?然后把href换成 "#X",发现依然可以实现阻止滚动的效果。所以应该是浏览器会把 "#" 当作是一种页面跳转的口令,接到这个口令就会把页面滚动到原始位置,但是只要把这个改成浏览器没有办法识别的名称,那么它就会把这个口令ignore了。

 

NOTE:后来发现IE6这个神奇的浏览器连"##"都能识别,所以如果你要兼容浏览器,那还是用"###"吧。。。

 

 

2010-10-11 更新

 

在最近开发的网站中,一直使用上述的"#X"方法解决页面跳动的问题。但是这样解决页面虽然不跳了,url却会变得异常的难看,所以一直想找个方法替代它。后来在一次山寨之旅中意外的找到了它——

                            href="javascript:void(0)"

 

 url从此干净了~~

 

 

 

除此方法之外还有提出:

 

定位到 <html> 上,document.getElementsByTagName( "html ")[0].style.overflow= "hidden "
或者 <html   id= "scroll ">
然后调用地方写document.getElementById( "scroll ").style.overflow= "hidden "

但是依次方法并未成功,也可能是我写的不对,这个留作以后再做验证。

 

 

 

 

 

 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
可以将这段代码分成两个组件:顶部快捷导航和购物车头部。 1. 顶部快捷导航组件: ```html <template> <div class="shortcut"> <div class="w"> <div class="fl"> <ul> <li>购物商城欢迎您!</li> <li> <a href="#">请登录</a> <a href="#" class="style-red">免费注册</a> </li> </ul> </div> <div class="fr"> <ul> <li><a href="#">我的订单</a></li> <li class="spacer"></li> <li> <a href="#">我的购物</a> <i class="icomoon"></i> </li> <li class="spacer"></li> <li><a href="#">商城会员</a></li> <li class="spacer"></li> <li><a href="#">企业采购</a></li> <li class="spacer"></li> <li><a href="#">关注商城</a> <i class="icomoon"></i></li> <li class="spacer"></li> <li><a href="#">客户服务</a> <i class="icomoon"></i></li> <li class="spacer"></li> <li><a href="#">网站导航</a> <i class="icomoon"></i></li> </ul> </div> </div> </div> </template> <script> export default { name: "Shortcut" } </script> ``` 2. 购物车头部组件: ```html <template> <div class="car-header"> <div class="w"> <div class="car-logo"> <b>购物车</b> </div> </div> </div> </template> <script> export default { name: "CartHeader" } </script> ``` 然后在父组件中使用这两个子组件: ```html <template> <div id="app"> <Shortcut /> <CartHeader /> </div> </template> <script> import Shortcut from "@/components/Shortcut.vue"; import CartHeader from "@/components/CartHeader.vue"; export default { components: { Shortcut, CartHeader } } </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值