最近在开发一个小web的时候想给一个按钮增加一个弹出dialog功能,但是发现点击按钮后页面总是自动滚动至顶部,这点从用户体验上来讲是极其不爽的,于是开始跳进google大池寻求解决办法。网上的办法有很多,但是唯独下面这个生效了,转来收藏。
"平时开发的HTML表单,链接通常会使用<a href="#" onclick="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 "
但是依次方法并未成功,也可能是我写的不对,这个留作以后再做验证。
分享到:
相关推荐
jquery 制作鼠标点击描点a标签返回顶部
Bootstrap Auto-Hiding Navbar是一款非常实用的在页面滚动时自动隐藏Bootstrap顶部导航菜单的jQuery插件。它通过扩展原生Bootstrap顶部固定导航菜单,使其在页面向下滚动时隐藏,向上滚动时又显示出来。
自动缩回到网页顶部的广告特效,用两张广告图片来实现 ,一张是正常的广告图片,一张是伸缩后显示的图片,打开网页后先显示正常的广告图片,停留数秒后大图片自动向上收缩,最后显示在网页顶部,调用伸缩后的图片...
针对 iOS端禁止列表顶部下拉和底部上拉露出浏览器灰色背景 的解决方案。
uniAPP,页面中要使用到顶部tab菜单,代码实现uniAPP,页面中要使用到顶部tab菜单,代码实现
主要介绍了vue项目中在使用vue-router切换页面的时候滚动条自动滚动到顶部的实现方法,一般使用Window scrollTo() 方法实现,本文给大家简单介绍了crollTop的使用,需要的朋友可以参考下
自动隐藏的弹性返回顶部JS代码.rar 自动隐藏的弹性返回顶部JS代码.rar
解决后页面滚动到顶端。
<!...<... <head> <meta charset="UTF-8">...<a>点击</a> ...解决问题: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</tit
网站顶部自动展开关闭大幅广告程序代码 相当适用 ‘推荐使用
在uniapp项目中 video层级过高 页面滑动时 遮挡顶部导航 或者页面有弹窗效果 视频同时也会遮挡弹窗 使用subNVues 解决此问题 pages.json 中 配置{ "path": "pages/index/index", "style": { ...
这是一款美观实用的jQuery页面滚动顶部固定tab选项卡切换代码,新闻列表导航选项卡切换插件。
Bootstrap Auto-Hiding Navbar是一款非常实用的在页面滚动时自动隐藏Bootstrap顶部导航菜单的jQuery插件。它通过扩展原生Bootstrap顶部固定导航菜单,使其在页面向下滚动时隐藏,向上滚动时又显示出来。
自定义的顶部标签分类视图,对于所有标签的总长度不超过父视图的使用平均宽度布局,对于多个标签超出父视图宽度的使用固定的间距,并能够滑动视图将点击的标签显示在视图的正中间,注释详尽,适合初学者参考学习。
jQuery网页顶部广告
在用mint ui写移动端从’listview’跳转到详情页时,详情页面由于大于手机高度可以滚动,当点击’listview’滚动list进入详情页面时发现详情页面不是从顶部开始显示。 一、目标: ‘listview’进入详情页面时详情页面...
IOS UIScrollView + UIButton 实现页面和顶部标签页水平滚动效果,可以运用到实际项目中
页面右边有返回顶部按钮,如果页面在顶部,则不显示按钮,当页面不在顶部时,出现返回顶部按钮。 更人性化的返回顶部操作
模仿魔兽世界顶部网页广告方式,支持自动播放,关闭,重新播放功能,代码简洁明了