点击返回顶部功能,代码很简单,这里就不多废话了,小伙伴们看代码吧。
HTML:
- <!--Go to Top-->
- <div id="Fixed">
- <a id="goTop" class="fl" title="去顶部" href="javascript:;">去顶部</a>
- </div>
- <!--Go to Top end-->
CSS:
- .fl{
- display:block;
- float:left;
- width:50px;
- height:50px;
- text-align:center;
- background-color:#eaeaea;
- background-image:url(../images/toTop.png);
- }
- .fl:hover{background-color:#f48942;background-image:url(../images/toTop.png);}
- #Fixed {
- position: fixed;
- _position: absolute;
- z-index: 100;
- bottom: 70px;
- left: 50%;
- margin-left: 530px;
- _bottom: auto;_top:
- expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-70);
- width: 50px;
- text-indent: -40000px;
- background: #fff
- }
- /*置顶 end*/
Js:
- /*置顶功能*/
- $(function(){
- $(window).bind('scroll', {
- fixedOffsetBottom: parseInt($('#Fixed').css('bottom'))
- },
- function(e) {
- var scrollTop = $(window).scrollTop();
- var referFooter =$('#footer');
- scrollTop > 100 ? $('#goTop').show() : $('#goTop').hide();
- if (!/msie 6/i.test(navigator.userAgent)) {
- if ($(window).height() - (referFooter.offset().top - $(window).scrollTop()) > e.data.fixedOffsetBottom) {
- $('#Fixed').css('bottom', $(window).height() - (referFooter.offset().top - $(window).scrollTop()))
- } else {
- $('#Fixed').css('bottom', e.data.fixedOffsetBottom)
- }
- }
- });
- $('#goTop').click(function() {
- $('body,html').stop().animate({
- 'scrollTop': 0,
- 'duration': 100,
- 'easing': 'ease-in'
- })
- });
- });
- /*置顶功能 end*/
网友评论文明上网理性发言 已有0人参与
发表评论: