html如何实现页面跳转的方法

2021-09-07 16:30:49 IT技术网互联网

浏览

html实现页面跳转的方法：1、使用默认链接锚记，代码为“#top”；2、href指向特定ID，代码为【超链接】；3、使用自定义链接锚记；4、使用简单函数设置“scrollTo(0,0)”；5、使用jquery操作DOM样式。

本教程操作环境：windows7系统、html5版，DELL G3电脑。

html如何实现页面跳转的方法

1、使用默认链接锚记

最简单的方法，只需添加一个超链接，给超链接的href属性设置值为“#top”即可实现返回顶部的功能。

<a href="#top">
		超链接
</a>

2、href指向特定ID

在页面现有的标签中，使用“返回顶部”的连接的href指向顶部具有id属性的标签，以实现返回顶部的功能。这种方法，需要在页面顶部的标签中有具有id属性的标签，来实现指向顶部。亦可自定义添加。

<body id="bh-page">
		...
		<a href="#bh-page">
		     超链接
		</a>   
</body>

3、使用自定义链接锚记

这种方法，就是使用的自定义链接锚记了，必须要定义锚记，然后使用超链接指向锚。
这种方法其实跟第二种方法差不多，只不过必须要额外定义一个链接锚记。

<a name="gohere"></a>						//定义一个超链接，跳转到这个，可以没有文字
.....
<a href="#gohere">
		超链接
</a>

4、使用简单函数

可以设置scrollTo(0,0)中的x、y的值来跳转到页面的具体位置。

<a href="javascript:window.scrollTo(x,y)>
	超链接
</a>

5、使用jquery操作DOM样式

使用js将body或html等元素的scrollTop属性设置为0，即可滚动到页面的顶部。一般使用jQuery来实现上述代码。

// 以下三种方式均可实现返回页面顶部
$(window).scrollTop(0);
$('body').scrollTop(0);
$('html').scrollTop(0);

此外，我们还可以使用jQuery的动画效果函数animate()来实现平滑滚动到页面顶部的动画效果。

// 在500毫秒内平滑滚动到页面顶部
$('body').animate( {scrollTop: 0}, 500);

推荐学习：Html视频教程

以上就是html如何实现页面跳转的方法的详细内容，更多请关注dnjidi.com其它相关文章！

html