html js评论置顶,js 一键置顶

本文介绍了一种创新的网页滚动条设计,通过JavaScript实现在固定位置的浮标,当页面滚动时提供一键快速返回顶部的功能,提升用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

(function() {

var btnId = '__gotop';

var isIE = !!window.ActiveXObject && /msie (\d)/i.test(navigator.userAgent) ? RegExp['$1'] : false;

function $() {

return document.getElementById(arguments[0]);

}

function getScrollTop() {

return ('pageYOffset' in window) ? window.pageYOffset

: document.compatMode === "BackCompat"

&& document.body.scrollTop

|| document.documentElement.scrollTop ;

}

function bindEvent(event, func) {

if (window.addEventListener) {

window.addEventListener(event, func, false);

} else if (window.attachEvent) {

window.attachEvent('on' + event, func);

}

}

bindEvent('load',

function() {

var css = 'background-color:#999;width:50px;height:50px;position:fixed;right:100px;bottom:30px;border-radius:10px;cursor:pointer;display:none;';

if (isIE && isIE < 7) {

css += '_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-30-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))';

var style = document.createStyleSheet();

style.cssText = '*html{background-image:url(about:blank);background-attachment:fixed;}';

}

var html = '

var el = document.createElement('DIV');

el.id = btnId;

el.style.cssText = css;

el.innerHTML = html;

document.body.appendChild(el);

el.onclick = function() {

(function() {

var top = getScrollTop();

if (top > 0) {

window.scrollTo(0, top / 1.2)

setTimeout(arguments.callee, 10);

}

})();

};

el.onmouseover = function() {

$(btnId).firstChild.style.borderBottom = '14px solid #ddd';

$(btnId).firstChild.firstChild.style.backgroundColor = '#ddd';

};

el.onmouseout = function() {

$(btnId).firstChild.style.borderBottom = '14px solid #fff';

$(btnId).firstChild.firstChild.style.backgroundColor = '#fff';

};

}

);

bindEvent('scroll',

function() {

var top = getScrollTop(), display = 'none';

if (top > 0) {

display = 'block';

}

if ($(btnId)) $(btnId).style.display = display;

});

})();

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值