网页内跳转方法-优快云博客

页间的跳转其实好简单直接使用<a href="www.google.com">google</a>即可。

但在页内实现跳转，网上一般都使用了锚来实现。

看例子：

<body>
	<%
		for(int i=1;i<100;i++){
	%>
	<a href="#top<%=i %>">go to top<%=i %></a><br>
	<%
		}
	%>

	<%
		for(int i=1;i<100;i++){
	%>
	<a name="top<%=i %>">top<%=i %></a><br>
	<%
		}
	%>
</body>

实现的关键在于使用<a href="#name">goto</a>

以及对应的<a name="name"></a>

以上例子是生成99个链接，和99个跳转链接。

见下图：

随便点击go to topx就可以跳转到相应的位置了。

还有一种方法，即是使用JQuery来实现。

首先要导入JQuery文件

<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>

见代码

<body>
	<%
		for(int i=1;i<55;i++){
	%>
	<a href="#" onclick="goToTopXX('top<%=i %>')">go to top<%=i %></a><br>
	<%
		}
	%>

	<%
		for(int i=1;i<55;i++){
	%>
	<a id="top<%=i %>">top<%=i %></a><br>
	<%
		}
	%>
	
</body>

实现JS如下：

<script type="text/javascript">
	/**
	* 实现页内跳转
	*/
	function goToTopXX(obj){
		var _targetTop = $('#'+obj).offset().top;//获取位置
		jQuery("html,body").animate({scrollTop:_targetTop},300);//跳转
	}
</script>

其中300为时间，时间越大，跳转的速度越慢。

这样其实也实现了！

thanks!that is all.

网上还有一种方法：（未测试）如下：

用JS实现页面内跳转，都知道用锚点

只需要用<a href="#top">就可以实现页面内跳转

如果要实现执行js之后实现页面内跳转呢?

<a href="javascript;" onclick="somefunc();" document.getElementById('top').scrollIntoView();>使用JS的内置函数scrollIntoView(); 即可实现.