JS---- 置顶滑动式

1.js置顶   

          <a href="javascript:scroll(0,0)"></a>                      /*scroll(0,50)  第一个参数是水平位置,第二个参数是垂直位置*/

---------------------------------------------------------------------------------------------------------------------------------------------------------------

2.页面顶部放置:

         <a name="top"id="top"></a> 

      页面底部放置:

      <ahref="#top" target="_self">返回顶部</a> 

---------------------------------------------------------------------------------------------------------------------------------------------------------------

3..js置顶根据相关时间

    <a href="javascript:pageScroll()"></a><span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">     </span>

function pageScroll() {
            window.scrollBy(0,-50);/*一个单位时间内波动的距离*/
            scrolldelay = setTimeout('pageScroll()',2);          /*单位时间*/
        } 


     注:以上代码仍在运行,需要clear掉,if(document.documentElement.scrollTop==0)clearTimeout(scrolldelay);

---------------------------------------------------------------------------------------------------------------------------------------------------------------

IE6兼容

{ display:block;background-position:-154px -1px;position:fixed; _position:absolute;width:33px; margin-left:982px; _margin-top:-250px;height:110px;
_top:expression(eval(document.compatMode &&document.compatMode=='CSS1Compat') ?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));}


html:
<a class="top-sit" href="javascript:void(0)"></a>



css:
/*处理IE6下滚动抖动的问题*/

*html{background-image:url(about:blank);background-attachment:fixed;}


 /*处理IE6下不兼容 position:fixed 的问题*/.top-sit{ width:36px; height:48px; background:url(../images/icon.png) no-repeat; position:fixed; right:50px; cursor:pointer;_position:absolute;_bottom:auto;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));

_margin-bottom:80px;}

滑动到 窗口高度为:窗口*0.4后显示

	<a class="slide_top" href="javascript:;"></a>
	<script>
		$(function(){
			var slide_top = $('.slide_top');

			function site(){
				var wh = $(window).height()*0.4;
				var st = $(document).scrollTop();
				
				if(st > wh)
					slide_top.fadeIn("slow");
				else
					slide_top.fadeOut("slow");
			}
			
			$(window).scroll(function(){ 
				site();
			})
			  
			//点击slide_top 按钮时, 滚动到顶部
			slide_top.click(function(evt) {  
				evt.preventDefault();  
				//绑定返回顶部  
				var sc_top = $(document).scrollTop();          
				var ini_h = 1;  
				timer = setInterval(function() {  
					if (sc_top -  ini_h <= 0) {  
						$(window).scrollTop(0);  
						timer && clearInterval(timer);  
					} else {  
						sc_top = sc_top - ini_h;  
						$(window).scrollTop(sc_top);  
					}  
					ini_h += 5;		//数字越大走越快  
				}, 10);  
			});
		})
	</script>



判断高度后显示与隐藏

var returnTop = $('.top-sit');

    $(window).scroll(function() {
         if($(this).scrollTop() > $(window).height()) {
             returnTop.slideDown();
         } else {
             returnTop.slideUp();
         }
    });
 
 

                
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值