◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。
返回顶部的插件
- 前端仕锦
- 时间:2016-04-04 08:20:44
- 6174人已阅读
今天没事情干,写了一个返回顶部和到页面底部的插件,直接页面引入JS即可, 没有加配置文件,有定制需要的直接改js吧
效果就是网站右下的那个。
<script src="../js/topdown.js" type="text/javascript"></script>
JS代码如下:
<script>
(function(window, undefined) {
topDown = window.topDown = {
goTop: function() {
var acceleration = 0.1;
var y = document.body.scrollTop;
var speed = 1 + acceleration;
window.scrollTo(0, Math.floor(y / speed));
if (y > 0) {
window.setTimeout("topDown.goTop()", 16);
}
},
goDown: function() {
if (window.jQuery) {
$('body').animate({
scrollTop: document.body.offsetHeight
},
500);
} else {
window.scrollTo(0, document.body.offsetHeight);
}
}
};
function addClickEvent(obj, eventType, fn) {
obj.addEventListener ? obj.addEventListener(eventType, fn, false) : obj.attachEvent("on" + eventType, fn);
}
var wrap = document.createElement("div"),
topDiv = document.createElement("div"),
downDiv = document.createElement("div"),
cssText = "width: 40px;height: 39px;cursor: pointer;opacity:0.20;" + "border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;display:none;" + "background-color:#000;background-repeat:no-repeat;background-position:center";
wrap.style.cssText = "bottom: 50px;height: 80px;position: fixed;right: 9px;width: 40px;";
topDiv.style.cssText = "background-image: url(../img/top.png)goTop.png);" + cssText;
downDiv.style.cssText = "background-image: url(../img/down.png);" + cssText;
addClickEvent(topDiv, 'click', topDown.goTop);
addClickEvent(downDiv, 'click', topDown.goDown);
addClickEvent(topDiv, 'mouseover',
function() {
topDiv.style.opacity = "0.4";
});
addClickEvent(downDiv, 'mouseover',
function() {
downDiv.style.opacity = "0.4";
});
addClickEvent(topDiv, 'mouseout',
function() {
topDiv.style.opacity = "0.2";
});
addClickEvent(downDiv, 'mouseout',
function() {
downDiv.style.opacity = "0.2";
});
wrap.appendChild(topDiv);
wrap.appendChild(downDiv);
if (document.getElementsByTagName('body').length == 0) {
window.onload = function() {
document.getElementsByTagName('body')[0].appendChild(wrap);
if (document.documentElement.clientHeight < window.screen.height) {
downDiv.style.display = "block";
}
};
} else {
document.getElementsByTagName('body')[0].appendChild(wrap);
if (document.documentElement.clientHeight < window.screen.height) {
downDiv.style.display = "block";
}
}
window.onscroll = function() {
if (document.body.scrollTop > 100) {
topDiv.style.display = "block";
topDiv.style.opacity = "0.2";
} else {
topDiv.style.display = "none";
}
};
})(window);
</script>上一篇:JavaScript 实现 Chrome 桌面通知 (Notification)
下一篇:JS中用于制作滚动代码的常用属性(offsetTop、clientTop、scrollTop、offsetTop等属性)