HTML 锚点超链接

简介:

先介绍下场景:

我做了一个博客管理

首页界面如下:

 标题是超链接,点击标题,进入博客详情页面:

 

博客标题下面有一个"返回"超链接,点击回到博客列表,超链接代码:

Html代码   收藏代码
  1. <a href="javascript:history.go(com.whuang.hsj.hrefClickCount)">返回</a>  

 说明:com.whuang.hsj.hrefClickCount的初始值为-1 ,

 

后来我发现有的博客很长,从博客底部回到标题那儿,必须滚动鼠标滚老半天,太不人性化了.

于是我在博客底部增加了一个超链接"回到博客标题",如下:

 但是问题出现了:

我点击"回到博客标题"超链接之后,再点击"返回",又会回到博客底部,我知道什么原因.

"回到博客标题"超链接 使用了锚点跳转,但是也属于跳转,跳转之后,博客底部就属于history了.所以再点击"返回"超链接就会回到history.

"回到博客标题"超链接实现代码:

Js代码   收藏代码
  1. var aInput =document.createElement("a");    
  2.                 aInput.href="#title_loc";  
  3.                 aInput.innerHTML="回到博客标题";  
  4.                 aInput.className="frontBlogHrefClass";//class 样式,在单独的css文件中定义  
  5.                 aInput.onclick=function(){  
  6.                     //注意:不论点击多少次"回到博客标题",go(-2)就可以回到博客列表  
  7.                     com.whuang.hsj.hrefClickCount=-2;  
  8.                 }  
  9.                 contentDiv.appendChild(aInput);  
  10.   
  11.                 var span333 =document.createElement("span");    
  12.                 span333.innerHTML="&nbsp; |&nbsp;<a class=\"frontBlogHrefClass\" href=\"javascript:history.go(com.whuang.hsj.hrefClickCount)\">返回博客列表</a>";  
  13.                 contentDiv.appendChild(span333);  

 锚点位置:

 

 

怎么办呢?

解决方法:

"回到博客标题"超链接点击一次就把com.whuang.hsj.hrefClickCount 自减1,但是实际测试有问题,如果我点击两次以上,再点击"返回"页面就会回到很早的页面(不是博客列表页面).

最终解决方法:

Js代码   收藏代码
  1. 不论点击多少次"回到博客标题",go(-2)就可以回到博客列表  


 

注意:

(1)后台采用spring MVC 框架;

(2)博客详情页面的"返回博客列表"超链接和"返回"超链接相同.

相关文章
|
1月前
如何在HTML文件中添加超链接
如何在HTML文件中添加超链接
21 0
|
4月前
|
前端开发
HTML超链接大致分为以下7类
HTML超链接大致分为以下7类
98 1
|
1月前
|
前端开发
HTML 超链接
HTML 超链接。
80 32
|
6月前
|
前端开发
前端第二课,HTML,alt,title,width/heigh,border,<a>超链接,target,tr,td,th
前端第二课,HTML,alt,title,width/heigh,border,<a>超链接,target,tr,td,th
|
3月前
|
移动开发 UED HTML5
如何像人类一样写HTML之图像标签,超链接标签与多媒体标签
如何像人类一样写HTML之图像标签,超链接标签与多媒体标签
|
4月前
|
前端开发
HTML图片音频视频标签、超链接标签、列表标签和布局标签示例
HTML图片音频视频标签、超链接标签、列表标签和布局标签示例
47 0
|
9月前
|
前端开发
HTML与CSS实现网页的超链接及美化
HTML与CSS实现网页的超链接及美化
150 0
HTML与CSS实现网页的超链接及美化
|
8月前
HTML基础(三)图像和超链接
HTML基础(三)图像和超链接
|
前端开发 开发工具 C++
web(3)--HTML超链接标记使用
web(3)--HTML超链接标记使用
89 0
web(3)--HTML超链接标记使用