使用 HTML 创建锚点超链接的方法
最编程
2024-08-02 14:43:05
...
先介绍下场景:
我做了一个博客管理
首页界面如下:
标题是超链接,点击标题,进入博客详情页面:
博客标题下面有一个"返回"超链接,点击回到博客列表,超链接代码:
- <a href="javascript:history.go(com.whuang.hsj.hrefClickCount)">返回</a>
说明:com.whuang.hsj.hrefClickCount的初始值为-1 ,
后来我发现有的博客很长,从博客底部回到标题那儿,必须滚动鼠标滚老半天,太不人性化了.
于是我在博客底部增加了一个超链接"回到博客标题",如下:
但是问题出现了:
我点击"回到博客标题"超链接之后,再点击"返回",又会回到博客底部,我知道什么原因.
"回到博客标题"超链接 使用了锚点跳转,但是也属于跳转,跳转之后,博客底部就属于history了.所以再点击"返回"超链接就会回到history.
"回到博客标题"超链接实现代码:
- var aInput =document.createElement("a");
- aInput.href="#title_loc";
- aInput.innerHTML="回到博客标题";
- aInput.className="frontBlogHrefClass";//class 样式,在单独的css文件中定义
- aInput.onclick=function(){
- //注意:不论点击多少次"回到博客标题",go(-2)就可以回到博客列表
- com.whuang.hsj.hrefClickCount=-2;
- }
- contentDiv.appendChild(aInput);
- var span333 =document.createElement("span");
- span333.innerHTML=" | <a class=\"frontBlogHrefClass\" href=\"javascript:history.go(com.whuang.hsj.hrefClickCount)\">返回博客列表</a>";
- contentDiv.appendChild(span333);
锚点位置:
怎么办呢?
解决方法:
"回到博客标题"超链接点击一次就把com.whuang.hsj.hrefClickCount 自减1,但是实际测试有问题,如果我点击两次以上,再点击"返回"页面就会回到很早的页面(不是博客列表页面).
最终解决方法:
- 不论点击多少次"回到博客标题",go(-2)就可以回到博客列表
注意:
(1)后台采用spring MVC 框架;
(2)博客详情页面的"返回博客列表"超链接和"返回"超链接相同.
上一篇: 玩转 HTML5 锚点链接
推荐阅读
-
HTML锚点:一种独特的超链接方式
-
HTML锚点:一种独特的超链接方式
-
HTML锚点:一种独特的超链接方式
-
HTML技巧:锚点定位和预格式化文本的使用" 1. 创建锚点链接以便快速定位目标内容 - 在需要被链接的目标位置添加相应id名 - 示例:<h3 id="two">第2集</h3> - 创建包含目标链接的超链接,只需在href属性中输入#后面跟着id名即可 - 示例:<a href="#two">点击这里跳转到第2集</a> 2. 预格式化文本:使用pre标签来保留原始格式 - pre标签可以用于显示源代码、数学公式等需要保持格式的内容 - 示例: <p> 这是一段预格式化后的文本, 可以看到这里的换行符、空格等都得到了保留。 </p> <pre> 这也是一段预格式化后的文本, 可以看到这里的换行符、空格等都得到了保留。 </pre>
-
html中锚点的基本使用
-
HTML和CSS中的锚点如何使用?
-
玩转HTML网页!带你了解命名锚记(锚点)的使用方法
-
使用 HTML 创建锚点超链接的方法
-
锚点是什么?正确使用锚点的方法解析
-
两种实用的HTML锚点跳转方法及其可能导致的页面上移问题解析