效果设置回到顶部浮窗设计

本文是一篇关于效果设置的帖子

    其实写一个回到顶部的浮窗也就100多行代码（包含空行）。写浮窗效果有三个难点，一个是处理ie6下的抖动效果，因为ie6不支持position:fixed这个属性。二是要处理窗口只适应问题。三是计算位置。

    对于第一个难点，上面有个链接，大家可以去看看，研究一下怎么处理http://jslover.com/?p=66。这里面讲得很清晰。一开始的时候发当初ie6下不知道为啥offset的取值始终不对，弄了许久，发现是position默认设置为fixed了，所以当前遇到jquery函数取值始终很奇异的时候，看看标签的属性是不是设置正确。还有，在非ie6的情况下，我是设置动画效果的，ie6没有动画效果。有时候可以对ie6进行一些取舍。

    窗口大小的变化也是一个很蛋疼的问题，重要还是因为ie6（他nnd）。作为一个前端工程师，我们要把用户的休会做到极致，因此我们不能不考虑那些经常改变窗口大小的人。在改变窗口的大小的时候，我们须要重新计算浮窗的位置。

    一下是实现的代码。

    每日一道理
自己把自己说服了，是一种理智的胜利；自己被自己感动了，是一种心灵的升华；自己把自己征服了，是一种人生的成功。

/**
*$backtop指的是浮窗的jquery对象，$background指的是你页面的背景对象，有的网站把自己的宽度设置为980，有的990等等，不过这里的代码没有考虑到宽度是全部浏览器窗口大小的情况。
*/
ticket.detail.Backtop = function($backtop, $background) {
	this._$backtop = $backtop;
	this._$background = $background;
	this._$win = $(window);

	this._isIE6 = $.browser.msie && $.browser.version < 7;

	this._defaultBacktopTop = this._$win.height() + 200;

	this._hasShow = false;

	this.init();
};

ticket.detail.Backtop.prototype = {

	init: function() {

		this._setPosition();

		this._attachEvents();
	},

	_showBacktop: function(top, left) {

		var config = {};

		left = left || this._$backtop.offset().left;

		if (this._$background.width() > this._$win.width()) {

			config.right = 1;

		} else {

			config.left = left;

		}

		if (this._isIE6) {

			this._$backtop.css(config);

		} else {
			config.top = top;
			this._$backtop.stop(true).animate(config, 'slow');
		}
	},

	_attachEvents: function() {

		this._$win.bind('scroll', $.proxy(this._handleWindowScroll, this));

		this._$win.bind('resize', $.proxy(this._handleWindowResize, this));
	},

	_handleWindowScroll: function() {

		var nowScrollTop = this._$win.scrollTop();

		var btOffset = this._$backtop.offset();

		var animateConfig = {};

		if (this._isIE6) {

			if (nowScrollTop >= 200 && !this._hasShow) {
				this._$backtop.show();
				this._hasShow = true;
			} else if (nowScrollTop < 200 && this._hasShow) {
				this._$backtop.hide();
				this._hasShow = false;
			}

		} else {

			if (btOffset.top > this._$win.height() && nowScrollTop >= 200 && !this._hasShow) {
				this._showBacktop(this._$win.height() - this._$backtop.height() * 1.618);

				this._hasShow = true;

			} else if (nowScrollTop < 200 && this._hasShow) {

				this._showBacktop(this._$win.height() + 200);

				this._hasShow = false;

			}
		}

	},

	_handleWindowResize: function() {
		if(this._$win.scrollTop() >= 200){
			this._setLeft();
			this._setTop();
		}else{
			this._setPosition();
		}
	},

	_setLeft: function() {
		var bgWidth = this._$background.width(),
			btWidth = this._$backtop.width(),
			winWidth = this._$win.width();

		var offsetLeft = bgWidth + btWidth;

		this._$backtop[0].style.right = null;

		if (bgWidth + this._$background.offset().left + btWidth * 1.618 > winWidth) {

			if (bgWidth > winWidth) {

				this._$backtop[0].style.left = null;
				this._$backtop.css('right', 10);

			} else {

				this._$backtop.css('left', this._$background.offset().left + bgWidth - btWidth);
			}
		} else {
			this._$backtop.css('left', bgWidth + this._$background.offset().left + btWidth * 0.618);
		}
	},

	_setTop: function() {

		var scrollTop = this._$win.scrollTop();
		var offsetTop = this._$win.height() - this._$backtop.height()*1.618;

		if (scrollTop >= 200) {
			if (this._isIE6) {
				this._$backtop[0].style.setExpression('top', 'document.compatMode=="CSS1Compat"?' +
					'documentElement.scrollTop+' + offsetTop + ':document.body.scrollTop+' + offsetTop);
			} else {
				this._showBacktop(this._$win.height() - this._$backtop.height() * 1.618);
			}
		}

	},

	_setPosition: function() {

		var offsetTop = this._$win.height() - this._$backtop.height()*1.618;

		if (this._isIE6) {
			this._$backtop.css('position', 'absolute');
			this._$backtop[0].style.setExpression('top', 'document.compatMode=="CSS1Compat"?' +
				'documentElement.scrollTop+' + offsetTop + ':document.body.scrollTop+' + offsetTop);

			var body = document.body;
			if (body.currentStyle.backgroundImage == 'none') {
				body.style.backgroundImage = window.location.protocol == 'https:' ? 'url(https:///)' : 'url(about:blank)';
				body.style.backgroundAttachment = 'fixed';
			}
		} else {
			this._$backtop.css('position', 'fixed');
			this._$backtop.css('top', this._$win.height() + 200);
		}

		this._setLeft();

		if (!this._isIE6) {
			this._$backtop.show();
		}
	}
};

欢送大家修改指正错误。

文章结束给大家分享下程序员的一些笑话语录： 这个世界上只有10种人：懂得二进制的和不懂得二进制的。