首页 >> js开发 >> js代码JavaScript常用工具函数汇总（浏览器环境）
js代码JavaScript常用工具函数汇总（浏览器环境）
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
前端业务中比较常用的JavaScript工具函数，浏览器环境常用，可直接拷贝在项目里使用。这里统一整理，方便查阅，本文章会持续更新。一、file转为base64一、file转为base64
/**
* file转为base64
* @param {*} file file对象
* @param {*} callback
*/
export const fileToDataURL = (file, callback) => {
let freader = new FileReader();
freader.readAsDataURL(file);
freader.onload = function (e) { callback(e.target.result); }
}
/**
* file转为base64
* @param {*} file file对象
* @param {*} callback
*/
export const fileToDataURL = (file, callback) => {
let freader = new FileReader();
freader.readAsDataURL(file);
freader.onload = function (e) { callback(e.target.result); }
}二、blob流转换为base64二、blob流转换为base64
/**
* blob流转换为base64
* @param {*} blob blob对象
* @param {*} callback
*/
export const blobToDataURL = (blob, callback) => {
let freader = new FileReader();
freader.readAsDataURL(blob);
freader.onload = function (e) { callback(e.target.result); }
}
/**
* blob流转换为base64
* @param {*} blob blob对象
* @param {*} callback
*/
export const blobToDataURL = (blob, callback) => {
let freader = new FileReader();
freader.readAsDataURL(blob);
freader.onload = function (e) { callback(e.target.result); }
}三、base64转换为blob三、base64转换为blob
/**
* base64转换为blob
* @param {*} dataurl base64
*/
export const dataURLtoBlob = (dataurl) => {
let arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
/**
* base64转换为blob
* @param {*} dataurl base64
*/
export const dataURLtoBlob = (dataurl) => {
let arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}四、base64转换为file,IE低版本不兼容四、base64转换为file,IE低版本不兼容
/**
* 将base64转换为file,IE低版本不兼容
* @param {*} dataurl base64
* @param {*} filename 文件名
*/
export const dataURLtoFile = (dataurl, filename) => {
let arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime });
}
/**
* 将base64转换为file,IE低版本不兼容
* @param {*} dataurl base64
* @param {*} filename 文件名
*/
export const dataURLtoFile = (dataurl, filename) => {
let arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime });
}五、图片url转化成base64五、图片url转化成base64
/**
* 图片url转化成base64
* @param {*} url 图片url
* @param {*} callback
* @param {*} outputFormat 图片格式
*/
export const imgUrlToDataURL = (url, callback, outputFormat) => {
let canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
img = new Image;
img.crossOrigin = 'Anonymous';
img.src = url + "?timeStamp=" + new Date().getTime();
img.onload = function () {
canvas.height = img.height;
canvas.width = img.width;
// ctx.drawImage(img, 0, 0);
ctx.drawImage(this, 0, 0, img.width, img.height);
let dataURL = canvas.toDataURL(outputFormat || 'image/png');
// callback.call(this, dataURL);
callback && callback(dataURL)
canvas = null;
};
}
/**
* 图片url转化成base64
* @param {*} url 图片url
* @param {*} callback
* @param {*} outputFormat 图片格式
*/
export const imgUrlToDataURL = (url, callback, outputFormat) => {
let canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
img = new Image;
img.crossOrigin = 'Anonymous';
img.src = url + "?timeStamp=" + new Date().getTime();
img.onload = function () {
canvas.height = img.height;
canvas.width = img.width;
// ctx.drawImage(img, 0, 0);
ctx.drawImage(this, 0, 0, img.width, img.height);
let dataURL = canvas.toDataURL(outputFormat || 'image/png');
// callback.call(this, dataURL);
callback && callback(dataURL)
canvas = null;
};
}六、获取窗口尺寸六、获取窗口尺寸
export function getViewportSize() {
let w = 0;
let h = 0;
if (window.innerWidth) {
w = window.innerWidth
h = window.innerHeight
} else if (document.body && document.body.clientWidth) {
w = document.body.clientWidth
h = document.body.clientHeight
} else if (document.documentElement && document.documentElement.clientWidth) {
w = document.documentElement.clientWidth
h = document.documentElement.clientHeight
}
return { w, h }
}
export function getViewportSize() {
let w = 0;
let h = 0;
if (window.innerWidth) {
w = window.innerWidth
h = window.innerHeight
} else if (document.body && document.body.clientWidth) {
w = document.body.clientWidth
h = document.body.clientHeight
} else if (document.documentElement && document.documentElement.clientWidth) {
w = document.documentElement.clientWidth
h = document.documentElement.clientHeight
}
return { w, h }
}七、浏览器环境检测七、浏览器环境检测
const ua = window.navigator.userAgent.toLowerCase()
// 是否微信
export const isWx = () => ua.match(/MicroMessenger/i) == 'micromessenger'
// 是否ipad
export const isIpad = () => ua.indexOf('ipad') > -1
// 是否iphone
export const isIphone = () => ua.indexOf('iphone os') > -1
// 是否uc
export const isUc = () => ua.indexOf('ucweb') > -1
// 是否windows pc
export const isWindows = () => ua.indexOf('windows') > -1
// 是否android
export const isAndroid = () => ua.indexOf('android') > -1 || ua.indexOf('adr') > -1
// 是否ios
export const isIos = () => /(iphone|ipod|ipad|ios)/i.test(ua)
// 是否qq浏览器
export const isQq = () => ua.indexOf('mqqbrowser') > -1 && ua.indexOf(' qq') < 0
// 是否qq内置浏览器
export const isQQInstalled = () => ua.indexOf(' qq') > -1 && ua.indexOf('mqqbrowser') < 0
const ua = window.navigator.userAgent.toLowerCase()
// 是否微信
export const isWx = () => ua.match(/MicroMessenger/i) == 'micromessenger'
// 是否ipad
export const isIpad = () => ua.indexOf('ipad') > -1
// 是否iphone
export const isIphone = () => ua.indexOf('iphone os') > -1
// 是否uc
export const isUc = () => ua.indexOf('ucweb') > -1
// 是否windows pc
export const isWindows = () => ua.indexOf('windows') > -1
// 是否android
export const isAndroid = () => ua.indexOf('android') > -1 || ua.indexOf('adr') > -1
// 是否ios
export const isIos = () => /(iphone|ipod|ipad|ios)/i.test(ua)
// 是否qq浏览器
export const isQq = () => ua.indexOf('mqqbrowser') > -1 && ua.indexOf(' qq') < 0
// 是否qq内置浏览器
export const isQQInstalled = () => ua.indexOf(' qq') > -1 && ua.indexOf('mqqbrowser') < 0八、开启与关闭全屏八、开启与关闭全屏
// 开启全屏
export function launchFullscreen(element) {
element = element || document.documentElement
if (element.requestFullscreen) {
element.requestFullscreen()
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen()
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen()
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullScreen()
}
}
// 关闭全屏
export function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen()
}
}
// 开启全屏
export function launchFullscreen(element) {
element = element || document.documentElement
if (element.requestFullscreen) {
element.requestFullscreen()
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen()
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen()
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullScreen()
}
}
// 关闭全屏
export function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen()
}
}九、返回顶部/指定位置，实现滚动动画九、返回顶部/指定位置，实现滚动动画
/**
* @param {*} number 距离页面顶部的距离
* @param {*} time 滚动所需时间 单位ms
*/
const scrolling = (number = 0, time) => {
if (!time) {
document.body.scrollTop = document.documentElement.scrollTop = number;
return number;
}
// 设置循环的间隔时间 值越小消耗性能越高
const spacingTime = 20;
// 计算循环的次数
let spacingInex = time / spacingTime;
// 获取当前滚动条位置
let nowTop = document.body.scrollTop + document.documentElement.scrollTop;
// 计算每次滑动的距离
let everTop = (number - nowTop) / spacingInex;
let scrollTimer = setInterval(() => {
if (spacingInex > 0) {
spacingInex--;
ScrollTop(nowTop += everTop);
} else {
clearInterval(scrollTimer); // 清除计时器
}
}, spacingTime);
};
// 滚动到距离页面顶部500px的位置 动画时间为300ms
// scrolling(500, 300);
/**
* @param {*} number 距离页面顶部的距离
* @param {*} time 滚动所需时间 单位ms
*/
const scrolling = (number = 0, time) => {
if (!time) {
document.body.scrollTop = document.documentElement.scrollTop = number;
return number;
}
// 设置循环的间隔时间 值越小消耗性能越高
const spacingTime = 20;
// 计算循环的次数
let spacingInex = time / spacingTime;
// 获取当前滚动条位置
let nowTop = document.body.scrollTop + document.documentElement.scrollTop;
// 计算每次滑动的距离
let everTop = (number - nowTop) / spacingInex;
let scrollTimer = setInterval(() => {
if (spacingInex > 0) {
spacingInex--;
ScrollTop(nowTop += everTop);
} else {
clearInterval(scrollTimer); // 清除计时器
}
}, spacingTime);
};
// 滚动到距离页面顶部500px的位置 动画时间为300ms
// scrolling(500, 300);十、实现锚点滚动十、实现锚点滚动
// 运用了H5的scrollIntoView方法，这是一个实验中的功能，IE 8以下、Safari 6以下、Safari on iOS 5以下不兼容
const scrollToAnchor = (anchorName) => {
if (anchorName) {
// 找到锚点
let anchorElement = document.getElementById(anchorName);
// 如果对应id的锚点存在，就跳转到锚点
if (anchorElement) {
anchorElement.scrollIntoView({
behavior: 'auto', // 定义动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto"
block: 'start', // 定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"
inline: 'nearest', // 定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "nearest"
});
}
}
}
// 运用了H5的scrollIntoView方法，这是一个实验中的功能，IE 8以下、Safari 6以下、Safari on iOS 5以下不兼容
const scrollToAnchor = (anchorName) => {
if (anchorName) {
// 找到锚点
let anchorElement = document.getElementById(anchorName);
// 如果对应id的锚点存在，就跳转到锚点
if (anchorElement) {
anchorElement.scrollIntoView({
behavior: 'auto', // 定义动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto"
block: 'start', // 定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"
inline: 'nearest', // 定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "nearest"
});
}
}
}以上就是JavaScript常用工具函数汇总（浏览器环境）的详细内容，关于JavaScript 工具函数的资料请关注其它相关文章！
/**
* file转为base64
* @param {*} file file对象
* @param {*} callback
*/
export const fileToDataURL = (file, callback) => {
let freader = new FileReader();
freader.readAsDataURL(file);
freader.onload = function (e) { callback(e.target.result); }
}
/**
* file转为base64
* @param {*} file file对象
* @param {*} callback
*/
export const fileToDataURL = (file, callback) => {
let freader = new FileReader();
freader.readAsDataURL(file);
freader.onload = function (e) { callback(e.target.result); }
}二、blob流转换为base64二、blob流转换为base64
/**
* blob流转换为base64
* @param {*} blob blob对象
* @param {*} callback
*/
export const blobToDataURL = (blob, callback) => {
let freader = new FileReader();
freader.readAsDataURL(blob);
freader.onload = function (e) { callback(e.target.result); }
}
/**
* blob流转换为base64
* @param {*} blob blob对象
* @param {*} callback
*/
export const blobToDataURL = (blob, callback) => {
let freader = new FileReader();
freader.readAsDataURL(blob);
freader.onload = function (e) { callback(e.target.result); }
}三、base64转换为blob三、base64转换为blob
/**
* base64转换为blob
* @param {*} dataurl base64
*/
export const dataURLtoBlob = (dataurl) => {
let arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
/**
* base64转换为blob
* @param {*} dataurl base64
*/
export const dataURLtoBlob = (dataurl) => {
let arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}四、base64转换为file,IE低版本不兼容四、base64转换为file,IE低版本不兼容
/**
* 将base64转换为file,IE低版本不兼容
* @param {*} dataurl base64
* @param {*} filename 文件名
*/
export const dataURLtoFile = (dataurl, filename) => {
let arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime });
}
/**
* 将base64转换为file,IE低版本不兼容
* @param {*} dataurl base64
* @param {*} filename 文件名
*/
export const dataURLtoFile = (dataurl, filename) => {
let arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime });
}五、图片url转化成base64五、图片url转化成base64
/**
* 图片url转化成base64
* @param {*} url 图片url
* @param {*} callback
* @param {*} outputFormat 图片格式
*/
export const imgUrlToDataURL = (url, callback, outputFormat) => {
let canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
img = new Image;
img.crossOrigin = 'Anonymous';
img.src = url + "?timeStamp=" + new Date().getTime();
img.onload = function () {
canvas.height = img.height;
canvas.width = img.width;
// ctx.drawImage(img, 0, 0);
ctx.drawImage(this, 0, 0, img.width, img.height);
let dataURL = canvas.toDataURL(outputFormat || 'image/png');
// callback.call(this, dataURL);
callback && callback(dataURL)
canvas = null;
};
}
/**
* 图片url转化成base64
* @param {*} url 图片url
* @param {*} callback
* @param {*} outputFormat 图片格式
*/
export const imgUrlToDataURL = (url, callback, outputFormat) => {
let canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
img = new Image;
img.crossOrigin = 'Anonymous';
img.src = url + "?timeStamp=" + new Date().getTime();
img.onload = function () {
canvas.height = img.height;
canvas.width = img.width;
// ctx.drawImage(img, 0, 0);
ctx.drawImage(this, 0, 0, img.width, img.height);
let dataURL = canvas.toDataURL(outputFormat || 'image/png');
// callback.call(this, dataURL);
callback && callback(dataURL)
canvas = null;
};
}六、获取窗口尺寸六、获取窗口尺寸
export function getViewportSize() {
let w = 0;
let h = 0;
if (window.innerWidth) {
w = window.innerWidth
h = window.innerHeight
} else if (document.body && document.body.clientWidth) {
w = document.body.clientWidth
h = document.body.clientHeight
} else if (document.documentElement && document.documentElement.clientWidth) {
w = document.documentElement.clientWidth
h = document.documentElement.clientHeight
}
return { w, h }
}
export function getViewportSize() {
let w = 0;
let h = 0;
if (window.innerWidth) {
w = window.innerWidth
h = window.innerHeight
} else if (document.body && document.body.clientWidth) {
w = document.body.clientWidth
h = document.body.clientHeight
} else if (document.documentElement && document.documentElement.clientWidth) {
w = document.documentElement.clientWidth
h = document.documentElement.clientHeight
}
return { w, h }
}七、浏览器环境检测七、浏览器环境检测
const ua = window.navigator.userAgent.toLowerCase()
// 是否微信
export const isWx = () => ua.match(/MicroMessenger/i) == 'micromessenger'
// 是否ipad
export const isIpad = () => ua.indexOf('ipad') > -1
// 是否iphone
export const isIphone = () => ua.indexOf('iphone os') > -1
// 是否uc
export const isUc = () => ua.indexOf('ucweb') > -1
// 是否windows pc
export const isWindows = () => ua.indexOf('windows') > -1
// 是否android
export const isAndroid = () => ua.indexOf('android') > -1 || ua.indexOf('adr') > -1
// 是否ios
export const isIos = () => /(iphone|ipod|ipad|ios)/i.test(ua)
// 是否qq浏览器
export const isQq = () => ua.indexOf('mqqbrowser') > -1 && ua.indexOf(' qq') < 0
// 是否qq内置浏览器
export const isQQInstalled = () => ua.indexOf(' qq') > -1 && ua.indexOf('mqqbrowser') < 0
const ua = window.navigator.userAgent.toLowerCase()
// 是否微信
export const isWx = () => ua.match(/MicroMessenger/i) == 'micromessenger'
// 是否ipad
export const isIpad = () => ua.indexOf('ipad') > -1
// 是否iphone
export const isIphone = () => ua.indexOf('iphone os') > -1
// 是否uc
export const isUc = () => ua.indexOf('ucweb') > -1
// 是否windows pc
export const isWindows = () => ua.indexOf('windows') > -1
// 是否android
export const isAndroid = () => ua.indexOf('android') > -1 || ua.indexOf('adr') > -1
// 是否ios
export const isIos = () => /(iphone|ipod|ipad|ios)/i.test(ua)
// 是否qq浏览器
export const isQq = () => ua.indexOf('mqqbrowser') > -1 && ua.indexOf(' qq') < 0
// 是否qq内置浏览器
export const isQQInstalled = () => ua.indexOf(' qq') > -1 && ua.indexOf('mqqbrowser') < 0八、开启与关闭全屏八、开启与关闭全屏
// 开启全屏
export function launchFullscreen(element) {
element = element || document.documentElement
if (element.requestFullscreen) {
element.requestFullscreen()
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen()
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen()
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullScreen()
}
}
// 关闭全屏
export function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen()
}
}
// 开启全屏
export function launchFullscreen(element) {
element = element || document.documentElement
if (element.requestFullscreen) {
element.requestFullscreen()
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen()
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen()
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullScreen()
}
}
// 关闭全屏
export function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen()
}
}九、返回顶部/指定位置，实现滚动动画九、返回顶部/指定位置，实现滚动动画
/**
* @param {*} number 距离页面顶部的距离
* @param {*} time 滚动所需时间 单位ms
*/
const scrolling = (number = 0, time) => {
if (!time) {
document.body.scrollTop = document.documentElement.scrollTop = number;
return number;
}
// 设置循环的间隔时间 值越小消耗性能越高
const spacingTime = 20;
// 计算循环的次数
let spacingInex = time / spacingTime;
// 获取当前滚动条位置
let nowTop = document.body.scrollTop + document.documentElement.scrollTop;
// 计算每次滑动的距离
let everTop = (number - nowTop) / spacingInex;
let scrollTimer = setInterval(() => {
if (spacingInex > 0) {
spacingInex--;
ScrollTop(nowTop += everTop);
} else {
clearInterval(scrollTimer); // 清除计时器
}
}, spacingTime);
};
// 滚动到距离页面顶部500px的位置 动画时间为300ms
// scrolling(500, 300);
/**
* @param {*} number 距离页面顶部的距离
* @param {*} time 滚动所需时间 单位ms
*/
const scrolling = (number = 0, time) => {
if (!time) {
document.body.scrollTop = document.documentElement.scrollTop = number;
return number;
}
// 设置循环的间隔时间 值越小消耗性能越高
const spacingTime = 20;
// 计算循环的次数
let spacingInex = time / spacingTime;
// 获取当前滚动条位置
let nowTop = document.body.scrollTop + document.documentElement.scrollTop;
// 计算每次滑动的距离
let everTop = (number - nowTop) / spacingInex;
let scrollTimer = setInterval(() => {
if (spacingInex > 0) {
spacingInex--;
ScrollTop(nowTop += everTop);
} else {
clearInterval(scrollTimer); // 清除计时器
}
}, spacingTime);
};
// 滚动到距离页面顶部500px的位置 动画时间为300ms
// scrolling(500, 300);十、实现锚点滚动十、实现锚点滚动
// 运用了H5的scrollIntoView方法，这是一个实验中的功能，IE 8以下、Safari 6以下、Safari on iOS 5以下不兼容
const scrollToAnchor = (anchorName) => {
if (anchorName) {
// 找到锚点
let anchorElement = document.getElementById(anchorName);
// 如果对应id的锚点存在，就跳转到锚点
if (anchorElement) {
anchorElement.scrollIntoView({
behavior: 'auto', // 定义动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto"
block: 'start', // 定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"
inline: 'nearest', // 定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "nearest"
});
}
}
}
// 运用了H5的scrollIntoView方法，这是一个实验中的功能，IE 8以下、Safari 6以下、Safari on iOS 5以下不兼容
const scrollToAnchor = (anchorName) => {
if (anchorName) {
// 找到锚点
let anchorElement = document.getElementById(anchorName);
// 如果对应id的锚点存在，就跳转到锚点
if (anchorElement) {
anchorElement.scrollIntoView({
behavior: 'auto', // 定义动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto"
block: 'start', // 定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"
inline: 'nearest', // 定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "nearest"
});
}
}
}以上就是JavaScript常用工具函数汇总（浏览器环境）的详细内容，关于JavaScript 工具函数的资料请关注其它相关文章！
相关文章:
- js如何手写简易的 Vue Routerjs大全
- jsJSONObject与JSONArray使用方法解析js大全
- jsvue 验证两次输入的密码是否一致的方法示例js大全
- jsOpenlayers+EasyUI Tree动态实现图层控制js大全
- jsJS sort排序详细使用方法示例解析js大全
- jsvue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决js大全
- JavaScript原生js实现表格翻页和跳转
- jsNodeJS模块Buffer原理及使用方法解析js大全
- js如何利用JS将手机号中间四位变成*号js大全
- JavaScriptjs前端传json后台接收‘‘被转为quot的问题解决
刚刚发布热门点击发布时间
- [02/23]chrome 浏览器插件外包:定制您的专属Chrome插件！专业外包团队助您轻松实现创意！
- [02/23]专业电脑浏览器插件外包服务，助力企业数字化转型！
- [02/23]解放双手，效率翻倍！Chrome插件前端自动化外包服务，助您轻松实现业务流程自动化！
- [02/23]定制您的专属Chrome插件！专业外包团队助您轻松实现创意！
- [02/23]Chrome插件外包：为你的浏览器赋能，开启无限可能
- [09/06]node js 调用kimi 接口批量生成网页
- [07/21]Node.js数据采集外包服务-数据采集专家-用Node.js释放数据的力量
- [07/21]专业前端开发-从PSD到响应式网页的无缝转换
- [07/18]专业Chrome插件开发- 为您的业务插上翅膀
- [07/18]智能数据抓取 -浏览器插件接口抓取服务外包
- [07/17]vue3 setup 监听url变化
- [07/17]git 回滚到指定 commit
- [07/15]浏览器插件使用场景:浏览器插件在数据抓取方面的使用场景非常广泛
- [07/15]Chrome 浏览器插件的使用场景
- [07/15]Chrome 浏览器插件开发的特点
