html跳转页面js代码，简约至上竟藏这般门道

本文介绍三款返回页面顶部的代码, 这三款代码是简单的, 可使用简单的HTML锚标记来回返, 也能够使用函数进行动态返回, 其他的还有悬浮脚本等, 这些比较复杂, 本文不再作介绍, 大家依据自身需要从中选择一种就行, 总之简约是最美的, 能够减少代码的就把代码减少, 能不调用的就不要调用, 要不是天缘博客的文章篇幅都很长, 也不会添加这个功能。

一、使用锚标记返回页面顶部

采用HTML锚标记是最为简单的, 只是看上去略微有些不太美观, 在点击之后会于地址栏呈现出这个锚标记, 其余方面倒并无什么问题。

页面顶部放置：

放置位置在标签之后随便找个地方放都可以，只要靠近顶部即可。

页面底部放置：

二、使用 函数返回顶部

函数用来控制滚动条的位置，有两种很简单的实现方式：

方式1：

":(0,0)" =":(0,0)">返回顶部

第一个参数为水平位置, 第二个参数是垂直位置, 比如说若想要定位处于垂直50像素的地方, 改成(0,50)便达成了。

方式2：

本方式是渐进式返回顶部，要好看一些，代码如下：

如此一来, 便会呈现动态返回顶部的状况, 然而, 尽管已然返回到顶部, 不过代码依旧处于运行状态, 并且还需要在函数之中增添一句以使其停歇。

if(..==0) ();

三、使用加上功能实现动态返回顶部

1、首先在网页BODY标签结束之前加上：

返回顶部

2、然后, 去调用接下来的这部分JS脚本内容, 这一脚本并非是天缘独自创作的, 其先前是从Z-BLOG官方论坛那边收集而来的, 那个源包当中并没有附带作者的链接, 要是原作者看见了的话, 烦请留下留言以便添加。

发起调用, 自然啦放置位置最优是处于“返回顶部”这个标签紧接着的下方, 此调用方式已然假定路径是JS, 其余位置需自行去进行修改。

补充：

按照上述要求, 返回顶部的代码呈现为文字样式, 也能够将文字转换为更为美观的图标, 除此之外, 还存在呈悬浮状况的返回顶部代码, 也就是在页面进行滚动动态时, 返回顶部图标会随之移动的那种, 此情形需要运用到层等相关内容, 致使其变得有些复杂, 在本文当中暂且不予罗列。