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

点击链接实现定位当前页面指定位置:
在很多网页都有这样的功能,点击一个链接会实现在当前页面的定位功能,实现此功能非常的简单,但是可能学者或者没有接触的朋友还不不了解,下面就对此做一下简单的介绍。

<a href="#jump">蚂蚁部落</a>
<p id="jump">只有努力才有美好的明天。</p>

以上代码是进行了压缩,将链接的href属性值设置为#+指定元素的id属性值,就可以使它们建立起 相互关系,这样点击链接的时候,就能够定位到此元素处。

时间: 2024-10-25 12:51:45

点击链接实现定位当前页面指定位置的相关文章

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

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

通过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/> <

关于js点击元素平滑滚动到页面指定位置的方法

function tiao(i){ var cur = document.getElementById(i); getPosition(cur); } function getPosition(e){ var t=e.offsetTop; var l=e.offsetLeft; while(e=e.offsetParent){ t+=e.offsetTop; l+=e.offsetLeft; } $("html,body").animate({scrollTop:t},300); }

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

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

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

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

点击链接打开两个页面

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>点击一个链接同时打开两个页面</title> <script type="te

点击按钮跳到当前页面指定的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

结构-行为-样式-AngularJs--指令实现 手动触发响应到页面指定位置

最近工作需要增强用户体验,项目经理说下拉框架用户体验太差,于是乎我开始想了如下指令.这个指令可以让用户点击的时候把下拉或者其他的响应显示的东西不会因为屏幕的滚动而看不见,也就是让用户看见他想看见的. 具体如下: define(['angular'], function(){ var commonDirectives = angular.module("commonDirectives", []); commonDirectives.directive("toLocate&qu

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