通过href简单实现单击a链接跳转到页面指定位置

在页面中点击a标签后,要使其跳到页面里面相应的地方,方法很简单,就是在a标签里面href中的内容和你要跳到这个区域的id同名即可,例如:

<a href="#ppp" target="_blank">jump</a>
<p>p1</p><br/><br/><br/>
<p>p1</p><br/><br/><br/>
<p>p1</p><br/><br/><br/>
<p>p1</p><br/><br/><br/>
<p>p1</p><br/><br/><br/>
<p>p1</p><br/><br/><br/>
<p>p1</p><br/><br/><br/>
<p>p1</p><br/><br/><br/>
<p id="ppp" name="pop" class="opo">ppp</p><br/><br/><br/>
<p>p1</p><br/><br/><br/>

仅使用#ppp有效,点击jump后,打开新窗口,并定位到ppp

时间: 2024-10-10 15:40:15

通过href简单实现单击a链接跳转到页面指定位置的相关文章

html锚点 点击跳转到页面指定位置

本来是在看阮大神写的ajax教程,突然发现点击目录文字会跳转到相对应的文本内容,于是乎激发了我的兴趣. 这个究竟怎么做的,刚开始看的时候一知半解,找度娘就是:"点击跳转到页面指定位置",找了下,原来专业术语叫:锚点. 度娘真是个博大精深的地方,有着多种的方法可以使用. 最简单的一种: 设置a标签的锚点就行啦,但是有个确定链接会更改,不利于刷新 <div class="skip" id="skip"> <h2>目录</

点击链接实现定位当前页面指定位置

点击链接实现定位当前页面指定位置:在很多网页都有这样的功能,点击一个链接会实现在当前页面的定位功能,实现此功能非常的简单,但是可能学者或者没有接触的朋友还不不了解,下面就对此做一下简单的介绍. <a href="#jump">蚂蚁部落</a> <p id="jump">只有努力才有美好的明天.</p> 以上代码是进行了压缩,将链接的href属性值设置为#+指定元素的id属性值,就可以使它们建立起 相互关系,这样点击链接

HTML实现跳转到页面指定位置

1 <a href="#page1">跳转到页面1</a> 2 3 <a href="#page2">跳转到页面2</a> 4 <br> 5 <div id="page1" style="height:1000px;">词条1</div> 6 <div id="page1">词条2</div> 7 8

html js点击按钮滚动跳转定位到页面指定位置(DIV)的方法代码

一:通过html锚点实现滚动定位到页面指定位置(DIV):    如果我们要点击实现跳转的地方是一个html锚点,也就是点击一个A标签超链接实现跳转,可以把A标签的href属性直接指向跳转指定位置的div,代码实现思路如下: <a class="banner" href="/schoolFair/registration#nav"> <a href="#abc">点击跳转</a>    <div id=&

如何用jquery实现点击后跳到页面指定位置

很多网站都有这种功能,主要为了让用户在长篇大论中比较迅速的跳到自己想要看的内容处,比如bootstrap就有相应的功能. 介绍一种非常简便可以实现这种功能的方式. 思路:1.这里要用到点击事件,因为点击处可能数量较多,因此最好用事件代理来处理,可以提高性能. 2.当点击一个按钮时,能够获取到与他相对应的元素的ID. 3.通过jquery的offset方法返回top和left两个属性后获取他的top属性. 4.用animate方法改变html的scrollTop属性,值为上面的top属性值. 以下

博客园随笔中点击标签可以跳到当页指定位置的方法

我们在写随笔的时候,如果内容比较多,那么我们就希望在最前面的索引中能自带跳转本文中的具体问之的功能.下面就简单介绍下载博客园中要实现这样的功能的方法.例如文章结构可能如下,那么我们希望点击索引中的索引项时能具体调到具体内容中对应的位置. 索引 1.Struts2是什么玩意?核心?主要的功能? 2.Struts2的核心知识 内容 一  .Struts2是什么玩意?核心?主要的功能? ....... 二.Struts2的核心知识 ...... 具体方法是将你要跳转的标题插入设置书签,之后在标签中插入

超链接跳转本页面某个位置

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>标题</title> </head> <body> <div> <!-- href的属性值为下面div的id值 --> <a href="#div1">超链接1</a

点击按钮跳到当前页面指定的div和跳到顶部或底部

function goTop() { $('html, body').animate({scrollTop:0}, 'slow'); } function goDiv(div) { var a = $("#"+div).offset().top; $("html,body").animate({scrollTop:a}, 'slow'); } function goBottom() { window.scrollTo(0, document.documentElem

想让两个地址跳转的页面一样

问题:项目首页登录:如想让(A)10.118.66.20:8080/ABX/ 与(B)10.118.66.20:8080/ABX/index.do,链接跳转的页面一样 web.xml中配置如下: <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> (1)可在index.jsp页面中处理 <%@ page language="java&q