分享菜鸟级的PHP采集教程与视频解析,HTML代码模板免费资源分享平台

在网页中如何添加返回顶部代码

02 10月
作者:七哥| 分类:生活随笔| 发布时间:2020年10月02日 |标签:返回顶部代码


网站添加返回顶部的方法有好多种,下面就说下简单的返回顶部效果的代码实现,另附加注释说明,最简单的静态返回顶部,点击直接跳转页面顶部及用 JS 模拟 CSS3 滚动效果上滑至顶部:

 方法一 : 最简单的静态返回顶部

使用文字添加方法,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能

1.用自定义命名锚点点击返回到顶部预设的id为gotop的元素:


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


2.操作 javascript:scroll(0,0) 函数用来控制滚动条的位置(0,0 : 第一个参数是水平位置,

第二个参数是垂直位置):


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


有缺点:返回效果是立即的,没有浏览页面的滚动感觉;

静态固定于页面底部的话,用户不一定看得到,那效果就不明显了。


方法二 :简单的静态返回顶部,用js模拟滚动效果上滑至顶部

<a onclick="pageScroll()">返回顶部</a>


JS 代码:
 function pageScroll(){
 //把内容滚动指定的像素数值( 0,0 :第一个参数是向右滚动的像素数值,第二个参数是
 window.scrollBy(0,-100);
 //模拟滚动向上效果
 scrolldelay = setTimeout('pageScroll()',100);
 //获取scrollTop值,声明了标准网页取document.documentElement.scrollTop,否则
 var sTop=document.documentElement.scrollTop+document.body.scrollTop;
 //判断当页面到达顶部,取消延时代码(否则页面滚动到顶部会无法再向下正常浏览页面)
 if(sTop==0) clearTimeout(scrolldelay);
}

也有缺点:滚动效果不平滑,且在页面很长时点击返回顶部,未向上到达页面顶部无法再正常浏览

页面;

同上依旧是静态固定于页面底部,不一定能曝光在用户面前。


方法三 :动态按需加载返回顶部,css侧边屏幕绝对定位,结合简单

jQuery动画实现更好体验


HTML 结构:

我使用的 div 标签作为这个结构,可能不标准,但是比较方便。在 div 标签中,内置了一个 span 标签,用

来显示文字。具体代码如下:


<div id="gotop"><span>回到顶部</span></div>


对,就这么简单的一句代码,直接在 span 标签中,填写 “返回顶部” 几个文字(这里用字还是用图是你

自己来定的哈,我只是演示一下)。剩下的就是使用 CSS 进行样式控制。

当然,不要忘了引用jQuery库(你也可以下载下载下来从本地链)!!!:


<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js">


这段代码需要添加在<head>...</head>里。

CSS 代码:

 /*gotop 返回顶部css样式控制*/
#gotop{
 width:60px;
 height:60px;
 position:fixed;
 bottom: 6%; //这里我用的百分比控制位置,你也可以选择px来控制,我是遵循自适应
 right: 2%;
 border-radius:10px 10px 10px 10px; //改变div圆角效果,可能我的有点小,根据自
 text-decoration:none;
 background: gray; //背景颜色,我的可能有点重
 display: none; //先设置none
}

上面这段样式代码,定义了 div 标签的外观样式,定义 display 为 none,这样,我们才能在顶部时看不见

它。定义 position 为 fixed ,让它固定在右下角。同时为它指定圆角,就是使用 border-radius 属性,定

于半径为10px的圆角(我这里定义的可能有点小,根据情况自己定义)。


#gotop span{

display:block;

font:14px "microsoft yahei";

text-align: center; //设置文字水平居中显示

color: white;

line-height: 60px; //让文字垂直居中显示,数值根据div高度改变

}


上面这段样式,就是定义了 span 标签里面的文字。这几句代码意思很简单,就是定义了文字的外观样式,

同时制定了颜色变化(我给的白色,当然根据需求自己改变哈...),这是为了用户体验。最下面的 lineheight: 60px,则是用来准确定位文字,让它垂直居中显示(具体放到哪里还是要根据自己来定哈)。


接下来就是 jQuery 的代码了:
 <script type="text/javascript">
 $(function(){
 $(window).scroll(function(){
 var scrollt = document.documentElement.scrollTop + document.body.scro
 if( scrollt > 800 ){ //判断滚动后高度超过800px,显示
 $("#gotop").fadeIn(400); //淡出
 }else{
 $("#gotop").stop(true,true).fadeOut(400); //如果返回或者没有超过,就淡入
 }
 });
 //当点击标签的时候,使用animate在1000毫秒的时间内,返回到顶部
 $("#gotop").click(function(){
 $("html,body").animate({scrollTop:"0px"},1000);
 });
 });
</script>

我这里展示的都是用文字,并没有用到任何图片,比较简单,需要用图片的替换成图片就可以了。

还算简单吧?就用这几句代码而已,就可以出现这个返回顶部功能。当然缺点也会是有的,就是在 IE6 等过

时的浏览器中,可能不会兼容,无法实现(没办法啊,jQuery库 只兼容在 IE6 之后啊ToT ...)。

这就是做出来的效果(并不好看,不喜勿喷啊):


3种,也很简单了,现在都有很多网站用的插件;友情推荐,自带返回顶部 的JS,自己写就可以,用什么插

件啊!

好了,以上就是本次分享内容,感谢您的参考~


浏览78 评论0
返回
目录
返回
首页
用JS控制手机或者PC来访分别iframe不同的内容 html如何引入其他html页面|教程

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。