几种常用网页返回顶部的代码

一、使用HTML的锚标记最简单了

但是唯一的缺点就是样式不怎么样，会显示这个锚标记。

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

页面底部放置：

二、使用Javascript Scroll函数返回顶部

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

方式1（推荐：简单方便）：

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

方式2（注重效果：缓慢向上）：

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

functionpageScroll() {window.scrollBy(0,-10);scrolldelay=setTimeout('pageScroll()',100);}<ahref="pageScroll();">返回顶部</a>

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

if(document.documentElement.scrollTop==0)clearTimeout(scrolldelay);

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

首先在网页body标签结束之前加上：

2、再调用以下JS脚本部分：

BackTop=function(btnId){varbtn=document.getElementById(btnId);vard=document.documentElement;window.οnscrοll=set;btn.οnclick=function(){btn.style.display="none";window.οnscrοll=null;this.timer=setInterval(function(){d.scrollTop-=Math.ceil(d.scrollTop*0.1);if(d.scrollTop==0)clearInterval(btn.timer,window.οnscrοll=set);},10);};functionset(){btn.style.display=d.scrollTop?'block':"none"}};BackTop('gotop');

这些可以放到网页中中，也可以独立存成一个js文件，比如gotop.js，再通过以下形式：

来调用，当然了位置最好放在“返回顶部”标签的下面，该调用方法已假设文件路径为JS，放在其它位置请根据实际修改。

几种常用网页返回顶部的代码相关推荐

几种常用的HTML文字移动代码[转载]
了解一定的html代码对于优化来说也是很好的一个帮助.所以今天学习了一下几种常用的html代码,拿过来与大家分享啊. 1.从左向右移文字移动代码代码 <marquee direction=ri ...
几种常用网页文本编辑器总结
原文地址: 几种常用网页文本编辑器总结作者: 浪迹天涯无忧少年文本编辑器应用总结一． lhgeditor文本编辑器 lhgeditor组件文件结构: 1. lhgeditor.js: 组件的核心 ...
html返回底部代码,jQuery实现的个性化返回底部与返回顶部特效代码
本文实例讲述了jQuery实现的个性化返回底部与返回顶部特效代码.分享给大家供大家参考,具体如下: 运用了所学习的jQuery特性,制作了这款效果,该效果集结了返回底部.返回顶部.网站留言导航三种功能 ...
手机移动端返回顶部js代码demo效果示例（整理）
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
淘宝网返回顶部JS代码效果
淘宝网返回顶部JS代码效果 http://hi.baidu.com/huangyongliang/blog/item/99f069cb0e731b12be09e619.html posted on 2 ...
jquery返回顶部特效代码网页滚动返回顶部特效
网页悬浮返回顶部图标可以说是一项非常常见切比较实用的功能,可以使用HTML来实现,但是返回顶部效果太过僵硬,体验不好,这里分享一个纯js返回顶部切具有过渡效果的实例. 效果如上图所示. 具体代码如下: ...
返回顶部php代码,网页中返回顶部代码(多种方法)另附注释说明_jquery
下面就说下简单的返回顶部效果的代码实现,附注释说明. 1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能方法一:用命名锚点击返回到顶部预设的id为top的元素 f ...
一段简单的网页返回顶部和返回底部代码（html+css+jquery）
最近用到了返回顶部和底部功能,找了找,查了查,改了改,最终实现效果大概这样子. 以下是相关代码: html部分: <div id="backtotop" class=&quo ...
网页返回顶部功能实现
一.效果图: 二.准备工作: jquery-3.6.0.min.js下载(链接如下) Download jQuery | jQuery 如图,右键选择Download the compressed.. ...
html一键回到顶部,HTML实现简单大方的 “返回顶部” 实例代码
简单的"返回顶部"效果 .cs{ width:50px; height:100px; background-color: #F0F0F0; border:1px solid #D9 ...

几种常用网页返回顶部的代码

几种常用网页返回顶部的代码相关推荐

最新文章

热门文章