`
DBear
  • 浏览: 231210 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类

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

阅读更多
     最近在开发一个小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 "

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

 

 

 

 

 

 

分享到:
评论
1 楼 uchaoxi 2017-01-02  
谢谢作者分享的经验,非常有用!

相关推荐

    打印机IPL指令中文说明

    - **指令**: `&lt;STX&gt;&lt;RS&gt;1&lt;US&gt;1&lt;ETB&gt;&lt;ETX&gt;` - **功能描述**: 开始打印指定数量的标签。 - **应用场景**: 在所有设置完成后启动打印作业。 ### 总结 以上指令涵盖了打印机的基本设置和高级配置,通过这些指令可以...

    通过href简单实现点击a链接跳到页面中指定的地方

    本文将详细介绍如何通过`href`属性来实现点击a链接跳到页面中指定的地方,这是一种称为内部链接或锚点链接的机制。 首先,让我们了解`&lt;a&gt;`标签的基本结构。`&lt;a&gt;`标签用于创建超链接,其基本语法如下: ```html &lt;a ...

    html语言课程

    用户可以通过点击链接快速跳转到其他页面或文件,从而实现全球范围内的信息检索。 - **文档结构**:HTML文档通常由文档头(`&lt;head&gt;`)和文档体(`&lt;body&gt;`)两大部分构成。文档头主要用于定义文档的元数据,如标题、...

    HTML框架演示,frameset,frame

    &lt;title&gt;框架页面&lt;/title&gt; &lt;frameset cols="50%,50%"&gt; &lt;frame src="left.html"&gt; &lt;frame src="right.html"&gt; &lt;/frameset&gt; &lt;/head&gt; &lt;/html&gt; ``` 在这个例子中,`&lt;frameset cols="50%,50%"&gt;`创建了一个两列的布局,...

    HTML标签属性大全

    而&lt;a&gt;标签用于创建超链接,通过不同的target属性值可以实现不同的链接行为,如打开新窗口(blank)、在当前窗口的顶部(top)或在指定的框架(frame)内打开链接。 贴图和音乐可以通过&lt;img&gt;和&lt;bgsound&gt;标签来实现。&lt;img&gt;...

    HTML5 对各个标签的定义与规定:header

    &lt;li&gt;&lt;a href="#contact"&gt;联系我们&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;/header&gt; ``` **示例2**:结合`&lt;hgroup&gt;`标签使用 ```html &lt;header&gt; &lt;hgroup&gt; &lt;h1&gt;主标题&lt;/h1&gt; &lt;h2&gt;副标题&lt;/h2&gt; &lt;/hgroup&gt; &lt;nav&gt; &lt;ul&gt; &lt;li&gt;&lt;a ...

    简单的HTML网页制作

    例如,&lt;h1&gt;到&lt;h6&gt;用于定义标题,&lt;p&gt;用于创建段落,&lt;a&gt;用于创建超链接。要创建一个简单的网页,你可以这样开始: ```html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;我的第一个HTML页面&lt;/...

    html简单网页制作,多个案例

    使用&lt;header&gt;、&lt;section&gt;和&lt;footer&gt;组织内容,通过&lt;a&gt;标签链接到其他网络资源,用&lt;img&gt;插入个人照片,利用CSS定制页面样式,使布局美观且易于阅读。 另一个案例可能是创建一个简单的博客文章页面,包含文章标题、...

    网页设计HTML代码(1).doc

    `&lt;br&gt;`标签用于插入换行,`&lt;blockquote&gt;`用于创建引用块,`&lt;dl&gt;`、`&lt;dt&gt;`和`&lt;dd&gt;`用于定义列表(描述列表),`&lt;ol&gt;`和`&lt;ul&gt;`以及`&lt;li&gt;`用于创建有序和无序列表,`&lt;div&gt;`是一个通用容器,常用于组织页面结构。...

    JS中如何实现点击a标签返回页面顶部的问题

    要实现点击`&lt;a&gt;`标签返回页面顶部,可以使用`href="#"`,这会让浏览器滚动到页面顶部: ```html &lt;a href="#"&gt;点击&lt;/a&gt; ``` 但这样做有一个副作用,点击链接会触发页面的默认行为,即在地址栏中出现"#".为了避免...

    常用标签的使用【说明】,standard-tag

    17. `&lt;a&gt;`:定义超链接,可以链接到其他页面或资源。 18. `&lt;img&gt;`:插入图像,需指定`src`属性为图片URL和`alt`属性为替代文本。 19. `&lt;table&gt;`:创建表格,包括`&lt;tr&gt;`(行)、`&lt;td&gt;`(单元格)和`&lt;th&gt;`(表头单元格...

    HTML常用标签以及常用技巧等说明

    - 锚点链接:`&lt;a name="a"&gt;&lt;/a&gt;`定义锚点,`&lt;a href="#a"&gt;返回顶部&lt;/a&gt;`链接到该锚点。 - 邮件链接:`&lt;a href="mailto:853020304@qq.com"&gt;发送邮件&lt;/a&gt;` ##### 4. 地址标签 - `&lt;address&gt;`:定义文档或文章的作者/...

    初学者,HTML自建模仿京东页面

    3. **布局元素**:在`&lt;body&gt;`中,使用`&lt;header&gt;`、`&lt;nav&gt;`、`&lt;main&gt;`、`&lt;section&gt;`、`&lt;article&gt;`、`&lt;aside&gt;`、`&lt;footer&gt;`等语义化标签来组织内容,模拟京东页面的顶部导航、商品分类、商品展示区、侧边栏和底部版权...

    jQuery医院网站顶部导航代码.zip

    &lt;a href='./'&gt;&lt;img &gt;&lt;/a&gt; &lt;/div&gt; &lt;!-- 导航 --&gt; &lt;div class="dh_bg"&gt; &lt;ul&gt; &lt;li&gt; &lt;a &gt; &lt;i class="img dh_01HOME"&gt;&lt;/i&gt; &lt;span&gt;网站首页&lt;/span&gt; &lt;/a&gt; &lt;/li&gt; &lt;li class="cur"&gt; &lt;a &gt; &lt;i class="img dh...

    HTML基础教程 简单易懂 速学

    在这个例子中,我们使用了标题标签`&lt;h1&gt;`、段落标签`&lt;p&gt;`、无序列表标签`&lt;ul&gt;`和`&lt;li&gt;`,以及链接标签`&lt;a&gt;`。这些基本元素构成了HTML文档的基本骨架,让网页内容有了清晰的结构和表现形式。通过不断学习和实践,你...

    毕向东HTML_CSS_JavaScript教程笔记

    通过#和name属性可以实现页面内部的跳转,例如&lt;a href="#top"&gt;回到顶部位置&lt;/a&gt;。 表单&lt;form&gt;用于用户输入数据并与服务器交互,method属性指定提交方式(GET或POST),action属性指定处理表单的URL。表单中的组件如...

    课程DW标签代码.pdf

    `&lt;a&gt;`标签创建超链接,通过`href`属性指向其他网页,`target`属性定义在何处打开链接,`title`提供链接的提示信息,`name`或`id`用于创建内部书签,如`&lt;a href="#top"&gt;返回顶部&lt;/a&gt;`。 `&lt;h1&gt;`至`&lt;h6&gt;`标签定义不同...

    html基础教程 表格与表单 图像和声音 框架 CSS.ppt

    表单则是通过&lt;form&gt;标签构建,常用元素有&lt;input&gt;(输入框)、&lt;select&gt;(下拉列表)、&lt;textarea&gt;(多行文本框)和&lt;button&gt;(按钮)等,用于收集用户数据。 图像的引入使用&lt;img&gt;标签,通过src属性指定图像文件路径,...

Global site tag (gtag.js) - Google Analytics