zoukankan      html  css  js  c++  java
  • 开发小技巧:超简单的“回到顶端”按钮实现 java程序员

    日期: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按钮,否则隐藏。

    其次,当点击“回到顶端”的时候,调用animate方法来滚动页面到顶端。

    另外,注意back-to-top的CSS属性应该设置如下:

    .back-to-top {
    	position: fixed;
    	bottom: 3em;
    	right: 3em;
    	text-decoration: none;
    	color: #EEEEEE;
    	background-color: rgba(0, 0, 0, 0.3);
    	font-size: 12px;
    	padding: 1em;
    	display: none;
    	border-radius: 3px;
    	border: 1px solid #CCCCCC;
    }
    

    特别提出需要设置position:fixed,这样按钮会跟随页面滚动。

    最后,我们这里使用了fixie来生成页面的“placeholder"内容,你引用相关Javascript并且添加class定义即可生成站位内容。如果你不了解如何使用,请查看着篇文章帮助你针对不同标签自动填入内容的轻量级javascript类库 - fixiejs,代码如下:

    <section>
    	<p class="fixie"></p>
    	<p class="fixie"></p>
    	<p class="fixie"></p>
    	<p class="fixie"></p>
    	<p class="fixie"></p>
    	<p class="fixie"></p>
    	<p class="fixie"></p>
    	<p class="fixie"></p>
    	<p class="fixie"></p>
    	<p class="fixie"></p>
    	<p class="fixie"></p>
    	<p class="fixie"></p>
    	<p class="fixie"></p>
    	<p class="fixie"></p>
    </section> 

    是不是很简单,大家可以在gbdebug里自己调试一下。

    在线调试:http://www.gbtags.com/gb/debug/559ff347-6c95-442f-8b3a-2ef794e699cd.htm

    via 极客社区

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

  • 相关阅读:
    动手动脑
    大道至简第七八章读后感
    super 的用法
    第六章
    课后作业
    大道至简第五章读后感
    课后作业
    大道至简第四章读后感
    大道至简——第六章
    Java数组课后作业
  • 原文地址:https://www.cnblogs.com/java20130725/p/3215567.html
Copyright © 2011-2022 走看看