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

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

浏览器脚本JavaScriptGoogleHTML 
阅读更多
     最近在开发一个小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 "

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

 

 

 

 

 

 

分享到：
| Java常用关键字总结（待续）
评论
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属性指定图像文件路径，...

Magicbox
Global site tag (gtag.js) - Google Analytics