开发者社区> 黄威的世界> 正文

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)博客详情页面的"返回博客列表"超链接和"返回"超链接相同.

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
HTML的笔记及展示(1)(锚点、a元素添加超链接href、img元素、iframe元素、HTML5新增的拖放API)
HTML的笔记及展示(1)(锚点、a元素添加超链接href、img元素、iframe元素、HTML5新增的拖放API)
22 0
HTML中的超链接
HTML中的超链接
26 0
零基础HTML入门教程(5)——超链接a标签
标签定义超链接,用于从一张页面链接到另一张页面。元素最重要的属性是 href 属性,它指示链接的目标。在所有浏览器中,链接的默认外观是:•未被访问的链接带有下划线而且是蓝色的•已被访问的链接带有下划线而且是紫色的•活动链接带有下划线而且是红色的。
37 0
HTML5学习-超链接标签
HTML5学习-超链接标签
29 0
Web前端开发笔记——第二章 HTML语言 第四节 超链接标签
Web前端开发笔记——第二章 HTML语言 第四节 超链接标签
69 0
JAVA Web入门之HTML中表格、表单、下列列表框、多行文本、超链接和图片标记的应用(超详细,附源码)
JAVA Web入门之HTML中表格、表单、下列列表框、多行文本、超链接和图片标记的应用(超详细,附源码)
81 0
HTML5 学习4.超链接标签及应用
HTML5 学习4.超链接标签及应用
27 0
Html之超链接
Html之超链接
25 0
【网页前端】HTML表格、图片、列表、超链接以及综合案例练习
【网页前端】HTML表格、图片、列表、超链接以及综合案例练习
103 0
HTML 简介【创建超链接】
HTML 简介【创建超链接】
60 0
+关注
黄威的世界
我是一个热衷IT技术的人,希望自己不断地设计开发出对别人非常有用的软件。有近7年的java开发经验(包括2年Android开发经验)和一年左右的linux使用经验。擅长Java Web后台开发 ,喜欢研究新的各种实用技术
文章
问答
文章排行榜
最热
最新
相关电子书
更多
天猫 HTML5 互动技术实践
立即下载
天猫HTML5互动技术实践
立即下载
《零基础HTML入门教程》
立即下载