欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

HTML 锚点超链接

程序员文章站 2022-03-28 10:35:26
...

先介绍下场景:

我做了一个博客管理

首页界面如下:
HTML 锚点超链接
            
    
    博客分类: javascriptJava Web 超链接锚点锚跳转锚点挑战history.go 
 标题是超链接,点击标题,进入博客详情页面:
HTML 锚点超链接
            
    
    博客分类: javascriptJava Web 超链接锚点锚跳转锚点挑战history.go 
 

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

<a href="javascript:history.go(com.whuang.hsj.hrefClickCount)">返回</a>

 说明:com.whuang.hsj.hrefClickCount的初始值为-1 ,
HTML 锚点超链接
            
    
    博客分类: javascriptJava Web 超链接锚点锚跳转锚点挑战history.go 
 

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

于是我在博客底部增加了一个超链接"回到博客标题",如下:
HTML 锚点超链接
            
    
    博客分类: javascriptJava Web 超链接锚点锚跳转锚点挑战history.go 
 但是问题出现了:

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

"回到博客标题"超链接 使用了锚点跳转,但是也属于跳转,跳转之后,博客底部就属于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="&nbsp; |&nbsp;<a class=\"frontBlogHrefClass\" href=\"javascript:history.go(com.whuang.hsj.hrefClickCount)\">返回博客列表</a>";
                contentDiv.appendChild(span333);

 锚点位置:
HTML 锚点超链接
            
    
    博客分类: javascriptJava Web 超链接锚点锚跳转锚点挑战history.go 
 

 

怎么办呢?

解决方法:

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

最终解决方法:

不论点击多少次"回到博客标题",go(-2)就可以回到博客列表

HTML 锚点超链接
            
    
    博客分类: javascriptJava Web 超链接锚点锚跳转锚点挑战history.go 
 

注意:

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

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

 

  • HTML 锚点超链接
            
    
    博客分类: javascriptJava Web 超链接锚点锚跳转锚点挑战history.go 
  • 大小: 18.2 KB
  • HTML 锚点超链接
            
    
    博客分类: javascriptJava Web 超链接锚点锚跳转锚点挑战history.go 
  • 大小: 96.5 KB
  • HTML 锚点超链接
            
    
    博客分类: javascriptJava Web 超链接锚点锚跳转锚点挑战history.go 
  • 大小: 46.3 KB
  • HTML 锚点超链接
            
    
    博客分类: javascriptJava Web 超链接锚点锚跳转锚点挑战history.go 
  • 大小: 32.5 KB
  • HTML 锚点超链接
            
    
    博客分类: javascriptJava Web 超链接锚点锚跳转锚点挑战history.go 
  • 大小: 57.3 KB
  • HTML 锚点超链接
            
    
    博客分类: javascriptJava Web 超链接锚点锚跳转锚点挑战history.go 
  • 大小: 35.1 KB