<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> jquery实现模仿新浪的返回顶部 </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js ">
//-->
</script>
<script type="text/javascript">
<!--
$(function(){
//开始先隐藏返回顶部的按钮
$(".goto").hide();
/*回到顶部*/
$(".goto").click(function(){
$("body").scrollTo("fast");
return false;
});
/*控制滚动条滚动插件*/
jQuery.fn.scrollTo = function(speed) {
var targetOffset = $(this).offset().top;
$('html,body').stop().animate({scrollTop: targetOffset}, speed);
return this;
};
/*回到顶部跟随滚动条滚动*/
var gotoscroll = $(".goto").offset().top + 350;
$(window).scroll(function (){
var vtop=$(this).scrollTop();
if(750>vtop){
return;
}
$(".goto").show();
var offsetTop = gotoscroll + $(window).scrollTop() +"px";
$(".goto").animate({top : offsetTop },{ duration:500 , queue:false }); }); })
</script>
<style type="text/css">
.goto {
background-color: #D4D0C8;
border: 1px solid #FFFFFF;
color: #0078B6;
}
.goto span {
display: block;
padding: 4px;
}
.goto {
border-radius: 3px 3px 3px 3px;
border:1px solid #ccc;
bottom: 100px;
display: block;
font-family: Arial;
left: 50%;
line-height: 20px;
margin-left: 476px;
padding: 5px 3px 0 0;
position: absolute;
text-align: center;
width: 20px;
}
a{
text-decoration:none;
}
</style>
</head>
<body>
<div class="outter">
<div class="inner">
<div class="content">
<div>
<img src="http://ww4.sinaimg.cn/bmiddle/70f7c889jw1dtmiunvnahj.jpg" border="0" alt=""/>
</div>
<div id="" class="">
<img src="http://ww3.sinaimg.cn/bmiddle/7112c07bjw1dtm7us4pwrj.jpg" border="0" alt=""/>
</div>
<a href="javascript:void(0);" class="goto"><span>返回顶部</span></a>
</div>
</div>
</div>
</body>
</html>
分享到：
分享到：
相关推荐
本文给大家带来的是使用javascript结合jQuery实现返回顶部的功能，并附上源码，送给大家，需要的童鞋直接拿走吧
jquery实现返回顶部按钮demo，利用简单的jquery动画，易于学习
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮。希望大家能够喜欢
很多网站上都有返回顶部的效果，本文阐述如何使用jquery实现返回顶部按钮。 首先需要在顶部添加如下html元素： <p id=back-to-top><a><span></span>返回顶部</a></p> 其中a标签指向锚点top，可以在顶部防止一个<a>...
js+JQuery返回顶部功能如何实现.docx
gototop是一款轻量级、简单易用的jquery返回顶部插件。该jquery返回顶部插件在用户向下滚动页面一段距离之后，会以CSS3动画方式出现返回顶部按钮。点击返回顶部按钮之后，页面以平滑的方式滚动回顶部。
jQuery实现带底部返回顶部按钮功能特效源码.zip
基于jquery实现的带返回顶部功能的在线客服网站侧边栏代码.zip
NULL 博文链接：https://zccst.iteye.com/blog/1881766
jQuery实现的QQ客服_官方微信_客服电话_返回顶部四合一功能特效源码
主要介绍了jQuery实现返回顶部按钮和scroll滚动功能[带动画效果],需要的朋友可以参考下
很多网站上都有返回顶部的效果，本文阐述如何使用jquery实现返回顶部按钮。 首先需要在顶部添加如下html元素： ”back-to-top”><a><span>返回顶部</a></p>其中a标签指向锚点top，可以在顶部防止一个<a></a>的锚点，...
二、jQuery下的返回顶部功能 您可以狠狠地点击这里：jQuery下的返回顶部demo 可以看到，如果页面有滚动高度，右下角就会有一个含有“返回顶部”字样的黑色背景半透明的小条条，如下图所示： 点击这里“返回顶部”...
博客园是程序员们比较喜欢的聚集地，很多人喜欢发发心得，一直都觉着挺好的，但最不满意他的一点是，没有返回到顶部的功能，好吧，我们自己来添。