页面上浮动的返回菜单

浮动的返回菜单应用十分广泛,本博客也采用到了。

直接上代码:

HTML

<a href="#top" id="back-to-top" title="返回顶层"></a>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style type="text/css">

	/* Back to top*/

	#back-to-top {
		font-size: 100px;
		position: fixed;
		bottom: 10em;
		right: 5px;
		text-decoration: none;
		color: #F7F6F6;
		background-color: #D9AC8B;
		font-size: 16px;
		padding: 1em;
		display: none;
	}

	#back-to-top:hover {
		color: #D9AC8B;
		background-color: #F7F6F6;
	}
</style>

Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script src="http://ckwongloy.github.io/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
	$( function (){
	    $( "#back-to-top" ).click( function (){
	        jQuery( "html,body" ).animate({
	            scrollTop:10
	        },500);
	    });
	    $(window).scroll( function () {
	        if  ( $( this ).scrollTop() > 50){
	            $( '#back-to-top' ).fadeIn( "fast" );
	        } else  {
	            $( '#back-to-top' ).stop().fadeOut( "fast" );
	        }
	    });
	});
</script>

注意事项

  • 改代码

引入文件的链接、属性值的设置,需要灵活修改。建议边测边改。

  • CSS、JS 在页面中的位置

CSS 放在 head,JS 放在 footer。

说明
  • CSS 文件和 JS 文件引入的差别?

    • CSS:./

    • JS 或 IMG: ../

本文最后修改时间: 2015年10月09日 20:14:24 (完) CC BY-NC-ND 3.0

若您发现文章中的错误,并愿告知于我,或想与我交流,我的联系方式在: Contacts


上一篇 Sublime Text 个人经验

All The Best

下一篇 使用 Markdown 需要注意的地方