一个Jquery的问题!急求救!(不好意思分比较少!) 5
functionfollowScreen(scrollObj){varorignH=scrollObj.offset().top;$(window).scroll(fun...
function followScreen(scrollObj){
var orignH = scrollObj.offset().top;
$(window).scroll(function(){
var windowH = $(window).scrollTop();
if(windowH<10){
scrollObj.hide();
}else{
scrollObj.fadeIn();
};
var offsetTop = orignH+windowH+"px";
scrollObj.animate({"top":offsetTop},{duration:400,queue:false});
});
scrollObj.hover(function(){
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
})
scrollObj.click(function(){
$("html,body").animate({scrollTop:0},200)
})
}
followScreen($(".tyhTop"));
这是一个跟随屏幕滚动,返回顶部的函数,但是存在两个缺点,求大神们指点.
缺点如下:
(1):第一次加载页面的时候,".tyhTop" 元素并没有因为scrollTop<10而隐藏,知道原因但是不知道怎么解决!
(2):该函数貌似基本能实现效果,但是窗口改变的时候,效果就不行了,分析了原因可能是,第一次获取的offset().top值没有随着窗口改变而改变,求解决办法!!! 展开
var orignH = scrollObj.offset().top;
$(window).scroll(function(){
var windowH = $(window).scrollTop();
if(windowH<10){
scrollObj.hide();
}else{
scrollObj.fadeIn();
};
var offsetTop = orignH+windowH+"px";
scrollObj.animate({"top":offsetTop},{duration:400,queue:false});
});
scrollObj.hover(function(){
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
})
scrollObj.click(function(){
$("html,body").animate({scrollTop:0},200)
})
}
followScreen($(".tyhTop"));
这是一个跟随屏幕滚动,返回顶部的函数,但是存在两个缺点,求大神们指点.
缺点如下:
(1):第一次加载页面的时候,".tyhTop" 元素并没有因为scrollTop<10而隐藏,知道原因但是不知道怎么解决!
(2):该函数貌似基本能实现效果,但是窗口改变的时候,效果就不行了,分析了原因可能是,第一次获取的offset().top值没有随着窗口改变而改变,求解决办法!!! 展开
展开全部
1.followScreen($(".tyhTop"));
放在
$(function(){
followScreen($(".tyhTop"));
});
呢?
2.除了绑定$(window).scroll 应该还需要绑定$(window).resize吧?
放在
$(function(){
followScreen($(".tyhTop"));
});
呢?
2.除了绑定$(window).scroll 应该还需要绑定$(window).resize吧?
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
<html>
<head></head>
<body id="gotoTop">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
内容
<a href="#gotoTop" style="position: fixed;left:100px;top:100px;width:100px;top:100px;line-height:100px;text-align:center;background:red;">返回顶部</a>
</body>
</html>
上面的代码不兼容IE6。如果你要更改返回顶部按钮的坐标请直接更改css中的left和topzhi值。
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
/***
* 编写时间:2013年9月15号
* author:zhump
***/
$(function() {
$.fn.manhuatoTop = function(options) {
var defaults = {
showHeight : 150,
speed : 1000
};
var options = $.extend(defaults,options);
$("body").prepend("<div id='totop'><a>返回</a></div>");
var $toTop = $(this);
var $top = $("#totop");
var $ta = $("#totop a");
$toTop.scroll(function(){
var scrolltop=$(this).scrollTop();
if(scrolltop>=options.showHeight){
$top.show();
}
else{
$top.hide();
}
});
$ta.hover(function(){
$(this).addClass("cur");
},function(){
$(this).removeClass("cur");
});
$top.click(function(){
$("html,body").animate({scrollTop: 0}, options.speed);
});
}
});
//调用
$(function (){
$(window).manhuatoTop({
showHeight : 100,//设置滚动高度时显示
speed : 500 //返回顶部的速度以毫秒为单位
});
});
* 编写时间:2013年9月15号
* author:zhump
***/
$(function() {
$.fn.manhuatoTop = function(options) {
var defaults = {
showHeight : 150,
speed : 1000
};
var options = $.extend(defaults,options);
$("body").prepend("<div id='totop'><a>返回</a></div>");
var $toTop = $(this);
var $top = $("#totop");
var $ta = $("#totop a");
$toTop.scroll(function(){
var scrolltop=$(this).scrollTop();
if(scrolltop>=options.showHeight){
$top.show();
}
else{
$top.hide();
}
});
$ta.hover(function(){
$(this).addClass("cur");
},function(){
$(this).removeClass("cur");
});
$top.click(function(){
$("html,body").animate({scrollTop: 0}, options.speed);
});
}
});
//调用
$(function (){
$(window).manhuatoTop({
showHeight : 100,//设置滚动高度时显示
speed : 500 //返回顶部的速度以毫秒为单位
});
});
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询