按钮、实现-开发小技巧:超简单的“回到顶端”按钮实现-by小雨

发一下牢骚和主题无关:

    日期:2013-3-26  源来:GBin1.com

    开辟小巧技:超简略的“回到顶端”按钮实现

    之前的文章中我们曾宣布过另外一个back to top的件插 :jQuery Back to Top,欢喜的友人可以点击来看。

    开辟小巧技:超简略的“回到顶端”按钮实现

    明天我们绍介的这篇web开辟小巧技将用使jQuery实现一个超简略的动滚到页面顶端的功能,代码如下:

$(document).ready(function() {
	// 动滚窗口来判断按钮表现或藏隐
	$(window).scroll(function() {
		if ($(this).scrollTop() > 150) {
			$('.back-to-top').fadeIn(100);
		} else {
			$('.back-to-top').fadeOut(100);
		}
	});
	
	// jQuery实现动画动滚
	$('.back-to-top').click(function(event) {
		event.preventDefault();
		$('html, body').animate({scrollTop: 0}, 500);
	})
});

    基本上用不太多解释,大家应当懂得代码功能。

    首先用使window象对的scroll回调函数来控制当页面向下动滚过超150px的时候,表现back to top按钮,否则藏隐。......

    via 极客区社

    

源来:开辟小巧技:超简略的“回到顶端”按钮实现

文章结束给大家分享下程序员的一些笑话语录: 腾讯总舵主马化腾,有人曾经戏称如果在Z国选举总统,马化腾一定当选,因为只要QQ来一个弹窗”投马总,送Q币”即可。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值