jQuery无图片网站回到顶部特效

1、新建html文档。

2、书写html页面。

<div class="scroll" id="scroll" style="display:none;"> 回到顶部 </div>

3、书写css样式。

<style type="text/css">

body, div, ul, li, a, img, h1, h2, h3, h4, h5, p, input { margin: 0; padding: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { font-family: "微软雅黑", Verdana, Arial, Helvetica, sans-serif; position: relative; }

img, input { outline: none; }

ul { list-style: none; }

a:link { text-decoration: none; color: #545454; }

a:visited { color: #525252; }

a:hover { color: #4D4D4D; }

.clear { clear: both; }

.ui-page { -webkit-backface-visibility: hidden; }

.container { padding: 5px; min-width: 320px; }

#one { width: 100%; }

#one li { float: left; }

#one li .a-1 { min-height: 70px; }

#one li a { display: block; margin: 5px; background: yellow; }

#one li img { width: 100%; min-height: 70px; vertical-align: middle; }

.scroll { width: 80px; height: 80px; background: #64BFAE; color: #fff; line-height: 80px; text-align: center; position: fixed; right: 30px; bottom: 50px; cursor: pointer; font-size: 14px; }

4、书写js特效，以及应用js包。

<script src="js/jquery-1.10.1.min.js"></script> 

<script type="text/javascript">

$(function(){

showScroll();

function showScroll(){

$(window).scroll( function() { 

var scrollValue=$(window).scrollTop();

scrollValue > 100 ? $('div[class=scroll]').fadeIn():$('div[class=scroll]').fadeOut();

} );

$('#scroll').click(function(){

$("html,body").animate({scrollTop:0},200);

});

}

})

</script>

5、查看效果。