프론트엔드 개발에서는 페이지가 특정 지점으로 스크롤되면 맨 위로 돌아가야 하는 문제가 자주 발생합니다. 따라서 페이지마다 이러한 메서드를 작성하면 코드가 매우 복잡해집니다. 복잡하므로 이 문제를 해결하기 위해 코드를 추출하고 쉽게 사용할 수 있도록 공개 함수로 캡슐화했습니다. 포장이 별로 좋지 않습니다. 의견이 다르시면 서로 상의하셔도 됩니다~
/** * 页面回顶部 * @obj //对象{}传入 ; 其中回顶部的imgSrc路径必传 ; 其他参数说明看函数内部的默认defaults对象 */ function _backToTop(obj){ var defaults = { pageHeight: 2, //默认当向下滚动2页时,显示 aId: 'aToTop', //a标签的id href: 'backTop', //跳转到指定body元素的顶部 aStyle: { //a标签样式 width: '40px', height: '40px', display: 'block', position: 'fixed', right: '20px', bottom: '50px', zIndex: 99999 //z-index:999的这种样式以 zIndex:999的方式传值 }, imgStyle: { //img标签样式 width: '100%', height: '100%' } }; for (var def in defaults) { if (typeof obj[def] === 'undefined') { obj[def] = defaults[def]; } else if (typeof obj[def] === 'object') { for (var deepDef in defaults[def]) { if (typeof obj[def][deepDef] === 'undefined') { obj[def][deepDef] = defaults[def][deepDef]; } } } } //把样式对象转化为样式字符串,有如:z-index:999;的样式按 zIndex:999;的 方式传值 obj.aStyle = JSON.stringify(obj.aStyle).replace(/{|}|"/g,'').replace(/,/g,';').replace(/[A-Z]/g, function(ch) {return '-'+String.fromCharCode(ch.charCodeAt(0) | 32);}); obj.imgStyle = JSON.stringify(obj.imgStyle).replace(/{|}|"/g,'').replace(/,/g,';').replace(/[A-Z]/g, function(ch) {return '-'+String.fromCharCode(ch.charCodeAt(0) | 32);}); var winHeight = document.documentElement.clientHeight || document.body.clientHeight; var scrollValue; document.getElementsByTagName('body')[0].setAttribute('id',obj.href); var box = document.createElement('a'); var img = document.createElement('img'); box.setAttribute('id',obj.aId); box.setAttribute('href','#'+obj.href); box.setAttribute('style',obj.aStyle); img.setAttribute('style',obj.imgStyle); img.setAttribute('src',obj.imgSrc); box.appendChild(img); window.addEventListener('scroll',function(e){ scrollValue = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; if(scrollValue > (winHeight * obj.pageHeight)){ document.body.appendChild(box); }else{ document.getElementById(obj.aId) ? document.body.removeChild(document.getElementById(obj.aId)) : null; } }); }
위 내용은 일반적인 js 함수를 캡슐화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!