现在随着业务越来越复杂,在页面上显示的内容页越来越多,所以有可能一个页面从顶部到底部需要滚动条滚动很长,而到了页面底部之后想跳转到顶部,如果还是使用滚动条的话就感觉很费时间。现在像qq空间、csdn等很多网站都在右下角有一个小图标,点击就会跳转的页面顶部,并且该小图标是随着滚动条的滚动出现和隐藏的。下面就给出这种效果的示例。
<html>
<head>
<title></title>
<style type="text/css">
#d-top {position:fixed; float:right; z-index:100; right:10px;
bottom:10px;}
#d-top img { width:42px; filter:alpha(opcity=30); -moz-opacity:0.3; -
khtml-opacity:0.3; opacity:0.3; }
#d-top a:hover img { filter:alpha(opcity=100); -moz-opacity:1; -khtml-
opacity:1; opacity:1; }
</style>
<script type="text/javascript">
$(function(){
$(window).bind("scroll",function(){
var d_top1=$('#d-top');
var heigth = 10;
var scrTop=(document.body.scrollTop||document.documentElement.scrollTop);
if(scrTop>heigth){
d_top1.show();
}else{
d_top1.hide();
}
});
$('#d-top-a').click(function(){
scrollTo(0,0);
this.blur();
return false;
});
});
</script>
</head>
<body>
<div id="d-top" style="display: none;">
<a id="d-top-a" href="#" title="回到顶部">
<img src="top_arrow.png" alt="TOP" border="0px;"></a>
</div>
</body>
</html>
好了,就这么简单。需要注意的是:
1.要引入jquery,需要哪个版本,自己根据项目决定吧。
2.其中的变量height,就是说当滚动条从最上边向下滚动多少px时,在屏幕的右下角出现 回到顶部的小图标。
3.这个小图标是一个图片,在上边的body中的div中,img标签的src要根据实际情况改变,图片我已上传可以下载使用。
- 大小: 583 Bytes
分享到:
相关推荐
主要介绍了js简单的点击返回顶部效果实现方法,实例分析了实现返回顶部效果的相关要点与实现技巧,需要的朋友可以参考下
点击 回到顶部 页面返回顶部上下弹动几次特效。
jQuery 实现回到顶部按钮效果 请将页面向下滚动,点击返回顶部
当用户浏览很长的页面时,可以通过点击页面右下角的“返回顶部”按钮返回到页面顶部。本文将使用gotoTop.js介绍三种“返回顶部”的效果。
在IOS开发过程中,经常会有这种需求,需要通过点击状态栏返回到顶部,给用户更好的体验效果,下面这篇文章给大家详细介绍了实现过程,有需要的可以参考借鉴。
jQuery实现的点击火箭图标页面返回顶部效果.zip
jQuery可爱火箭回到顶部效果代码,当滑动网页到下面的时候,会出现小火箭,到顶部,小火箭消失,点击小火箭有个返回顶部的效果,一般我们在商城网站或者企业网站中经常用到这样的效果,php中文网推荐下载!
js QQ空间点击Top效果 javascript点击图片 返回页面顶部
给网站加一个悬挂猫效果(点击返回顶部).txt
火箭返回页面顶部动画效果是一款基于jQuery实现的返回顶部网页代码,点击页面右下角显示火箭动画效果,星空网页背景。
滚动鼠标按钮显示 点击按钮 直接到页面顶部
gototop是一款轻量级、简单易用的jquery返回顶部插件。该jquery返回顶部插件在用户向下滚动页面一段距离之后,会以CSS3动画方式出现返回顶部按钮。点击返回顶部按钮之后,页面以平滑的方式滚动回顶部。
当用户浏览很长的页面时,可以通过点击页面右下角的“返回顶部”按钮直达页面顶部,以方便用户进行下一步操作
代码简介:带平滑效果的js返回顶部特效,先滚动页面到底部或者拖动滚动条,再查看右下角的小火箭,并点击试试
点击按钮缓慢回到顶部 我们先分析下实现这样的效果需要添加哪些事件。鼠标移进移出按钮,按钮表现发生变化,所以需要给按钮添加mouseover, mouseout事件。要侦听滚动条的变化,所以需要给window添加scroll事件,...
此效果是模仿QQ音乐返回顶部和返回底部代码,使用了锚点最基本的功能,无JS,保证了最快的加载速度。(牺牲掉了原来鼠标移上缓缓滚动的效果) 兼容:IE6 7 8 Firefox Chrome 锚点为空时,IE6下无法跳转到锚点,所以...
JQuery点击事件回到页面顶部效果的实现代码 //2个div,点击某个时回到顶部 <div xss=removed>111111111111111 <div id=top>top <引用JQuery> [removed] $(function(){ $(#top).click(function() { $(html,...