教你网站怎么添加返回顶部代码?

网站添加返回顶部有好几种，下面我简单介绍下：

1 使用文字添加方法最简单的是：最简单的“返回顶部”代码就是“<a href="javascript:scroll(0,0)">返回顶部</a>”（不包括引号），(0,0)代表座标，第一位是水平，第二位是垂直，(0,0)就表示网页左上角，文字部分（返回顶部）可以自由替换成自己需要的内容，比如也可以用“TOP”都可以。

这里就是简单返回顶部的代码，这里的只是改成了返回游戏首页~！

2。第二种复杂点

HTML 结构

我使用了 a 标签作为这个结构，可能不太标准，但是比较方便。在 a 标签中，内置了一个 span 标签，用来显示三角号。具体代码如下：

</a>

对，你没看错，就这么简单的一句代码，直接在 a 标签中，填写一个三角号。剩下的就是使用 CSS 进行样式控制。

CSS 代码

#回到顶部{

display:block;

width:60px;

height:60px;

position:fixed;

bottom:50px;

right:40px;

border-radius:10px 10px 10px 10px;

text-decoration:none;

display:none;

background-color:#999999;

}

上面这段代码，定义了 a 标签的外观样式，定义 display 为 block，这样，我们才能指定它的 width 和 height。定义 position 为fixed，让它固定在右下角。同时为它指定圆角，就是使用 border-radius 属性，定于半径为10px的圆角。

#回到顶部 span{

display:block;

width:60px;

color:#dddddd;

}

#回到顶部 span:hover{

color:#cccccc;

}

#gotop span{

font-size:40px;

text-align:center;

margin-top:4px;

}

上面这一段，就是定义了 span 标签里面的三角号，至于如何打出这个“三角号”，使用搜狗输入法，按下“Ctrl + Shift + z”，就会弹出搜狗的特殊字符，就可以找到了。这几句代码意思很简单，就是定义了三角号的外观样式，同时制定了颜色变化，这是为了用户体验。最下面的 margin-top：4px，则是用来准确定位三角号，让它居中显示。

jQuery 代码

具体的 jQuery 代码如下，解析已经写在注释里面了：

$(function(){

$(window).scroll(function(){ //只要窗口滚动,就触发下面代码

var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //获取滚动后的高度

if( scrollt >200 ){ //判断滚动后高度超过200px,就显示

$("#回到顶部").fadeIn(400); //淡出

}else{

$("#回到顶部").stop().fadeOut(400); //如果返回或者没有超过,就淡入.必须加上stop()停止之前动画,否则会出现闪动

}

});

$("#回到顶部").click(function(){ //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部

$("html,body").animate({scrollTop:"0px"},200);

});

还要下载个回到顶部的图片上传网站根目录里！

怎么样，简单吧？就用这几句代码而已，就可以出现这个功能、。当然缺点也是有的，就是在IE6等过时的浏览器中，可能不会兼容，无法实现。

3种，就是也很简单了，现在都有很多网站用的插件：友荐，自带返回顶部的JS

你只要是网站的拥有者，到上面去申请个号，复制它的代码，这我就不写了。很短的一段代码，复复制进自己的文章内容页：就可以了。

图片都不用上传，真的很轻松，也很方便！

教你网站怎么添加返回顶部代码?相关推荐

HTML点击元素页面回到顶部,博客园页面添加返回顶部 TOP 按钮
博客园页面添加返回顶部 TOP 按钮 TOP 按钮进入网页管理 -> 设置在 "页面定制 CSS 代码" 中添加如下 CSS 样式, 当然你可以改为自己喜欢的样式此处可 ...
jQuery火箭图标返回顶部代码
在网上找来段使用jQuery火箭图标返回顶部代码,感觉比较酷,比较炫,大概样式如下, 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
传奇开区网站如何添加流量统计代码
传奇开区网站如何添加流量统计代码的操作方法,在投入广告前添加流量统计代码,可以分析出发布站上人效果,下次投入广告就更有方向,毕竟开服广告成本确实挺高的,为了开好服,我们必须将每分钱都花在刀刃上! 网站 ...
网页中返回顶部代码(多种方法)另附注释说明
下面就说下简单的返回顶部效果的代码实现,附注释说明,最简单的静态返回顶部,点击直接跳转页面顶部及用js模拟滚动效果上滑至顶部下面就说下简单的返回顶部效果的代码实现,附注释说明. 1. 最简单的静态返 ...
html设置返回首页,html页面添加返回顶部按钮
利用 jQuery 中的 animate 和 scrollTop 方法,你无需插件就可以创建简单的 scroll up 效果:// 返回顶部$('a.top'). html:css:.box {wid ...
简单返回顶部代码及注释说明（转）
最近做了一个排行榜页面,分类较多,并且以图文形式展示......最后页面明显过长了,用户体验自然不够好.最后想着在页面上部增加了页面内跳转导航,直接导航到本页的分类命名锚块.当然这就需要结合" ...
html5 按钮回到顶部,html页面添加返回顶部按钮
html:css:.box {width: 100%;height: 100px;background: skyblue;}.box1 {width: 100% 利用 jQuery 中的 animat ...
返回顶部php代码,网页中返回顶部代码(多种方法)另附注释说明_jquery
下面就说下简单的返回顶部效果的代码实现,附注释说明. 1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能方法一:用命名锚点击返回到顶部预设的id为top的元素 f ...
隐藏html5回到顶部,用jQuery实现的智能隐藏、滑动效果的返回顶部代码
在线DEMO:传送门 HTML代码(放在页面任意位置,并用CSS美化): 回到顶部 JS代码: $(document).ready(function() { //首先将#back-to-top隐藏 $ ...

教你网站怎么添加返回顶部代码?

教你网站怎么添加返回顶部代码?相关推荐

最新文章

热门文章