js小问题集
以下是针对我遇到的各种细节点，觉得有必要熟悉和常用的集合。
大体包括 js格式化，css效果，html输出等。比较零散却实用，避免有同遭遇的同学踩坑。
1.jquery锚点跳转
(function() {
//如果已经有锚点了则判断该锚点是否存在，再滚动
if (location.hash) {
var target = $(location.hash);
if (target.length == 1) {
var top = target.offset().top - 99;
if (top > 0) {
$('html,body').animate({
scrollTop: top
},500);
}
}
}
//针对a链接中带#号的点击
$('a[href*=#]').on("click", function() {
var target = $(this.hash);
if (target.length) {
var vtop = target.offset().top;
$('html,body').animate({
scrollTop: vtop - 99
},500);
return false;
} });
})();
2.css loading效果,适合一张loading图式加载页面
.loading {
display: none;
position: fixed;
z-index: 99999;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 ) url('../Images/loading.gif') 50% 50% no-repeat;
}
3. css垂直居中的办法
设置div属性为table，子内容为table-cell，vertical-align:middle，此方法是最常见的，兼容性较好，偶尔在低版本会出现问题。建议使用。
Content goes here
#wrapper{display: table;}#cell{ display: table-cell; vertical-align: middle;}
ps：还有几个办法，有时间则另开专题阐述。
4.js判断浏览器是否为IE8以下
var lessThenIE8 = function () {
var UA = navigator.userAgent,isIE = UA.indexOf('MSIE') > -1,
v= isIE ? /\d+/.exec(UA.split(';')[1]) : 'no ie';
return v <= 8;
}();
5. php下使用basename在中文目录下使用会出现问题，可使用下面的函数代替。
function get_basename($filename){
return preg_replace('/^.+[\\\\\\/]/', '', $filename);
}
6.bootstrap 下的遮罩层默认是显示在顶部，如需要垂直居中，可参照如下方法。以下是针对设备在768px以上显示。
.modal {
text-align: center;
}
@media screen and (min-width: 768px) {
.modal:before {
display: inline-block;
vertical-align: middle;
content: " ";
height: 100%;
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
}
7.html下textarea下设置默认换行，可用 来代替 \r\n
8.js 小数转百分比：
var a=0.34;
return a.toFixed(2).slice(2,4)+"%";
9.js计算滚动条宽度，主要原因是因为：在pc浏览器中，滚动条会占位元素的内边距和内容区域，而在移动浏览器中，滚动条是不占位，且自动显隐的，因此，在全屏或者元素做滚动的情况下不能忽视此问题。
function getScrollbarWidth() {
var oP = document.createElement('p'),
styles = {
width: '100px',
height: '100px',
overflowY: 'scroll'
},
i,
scrollbarWidth;
for (i in styles) oP.style[i] = styles[i];
document.body.appendChild(oP);
scrollbarWidth = oP.offsetWidth - oP.clientWidth; //根据新生成的dom中的偏移宽度和使用宽度计算出滚动轴宽度
oP.remove();
return scrollbarWidth;
}
10.html下table表头固定，某些需求需要将table下的表头固定在顶部，即滚动内容的时候标题仍置顶，一般情况下是通过js来实现，新生成一个table，并填充现有的标题。再用css覆盖在旧的标题上面。如下是html标签实现，需注意宽度问题。https://output.jsbin.com/AjiJIGA/1
.table-head{padding-right:17px;background-color:#999;color:#000;}
.table-body{width:100%; height:300px;overflow-y:scroll;}
.table-head table,.table-body table{width:100%;}
<col />
<col />
参照效果：https://jsfiddle.net/13ugu4fm/