如何通过html标记或js代码实现跳转返回页面顶部

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

使用html锚标记最简单,就是看起来有点不好看,点击后会在地址栏显示这个锚标记。

页面顶部放置:

<a name="top" id="top"></a>

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

页面底部位置:

<a href="#top" target="_self">返回顶部</a>


二:使用JavaScript scroll函数返回顶部

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

方式1:

<a href="javascript:scroll(0,0)" mce_href="javascript:scroll(0,0)">返回顶部</a>

scroll第一个参数是水平位置,第二个参数是垂直位置,比如要想 定位在垂直50像素处,改为scroll(0,50)就可以了

方式2:

本方式是渐进式返回顶部,要好看一些

function pageScroll(){

window.scrollBy(0,-10);

scrolldelay = setTimeout('pageScroll()',100);

}

<a href="pageScroll();"  mce_href="pageScroll();">返回顶部</a>

这样就会动态返回顶部,不过虽然返回到顶部但是代码仍在运行,还需要在pageScroll函数加一句给停止掉。

三:使用onload加上scroll功能实现动态返回顶部

1.首先在网页body标签结束之前加上:

<div id="gotop">返回顶部</div>

2.再调用一下js脚本部分



  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值