我要评论● 本次我们将实现点击按钮时候，可以平滑得滚动到指定位置
● 首先我们获取到按钮信息和想要滚动到得章节
const btnscrollto = document.queryselector('.btn--scroll-to');
const section1 = document.queryselector('#section--1');● 下一步就是添加点击事件了
btnscrollto.addeventlistener('click', function (e) {
const slcoords = section1.getboundingclientrect();
});
getboundingclientrect()是一个javascript方法，用于获取一个元素相对于视口的位置和尺寸。它返回一个domrect对象，包含了元素的top、right、bottom、left、width、height等属性。
btnscrollto.addeventlistener('click', function (e) {
const slcoords = section1.getboundingclientrect();
console.log(slcoords);
});
btnscrollto.addeventlistener('click', function (e) {
const slcoords = section1.getboundingclientrect();
console.log(slcoords);
console.log(e.target.getboundingclientrect());
});
//通过调用e.target.getboundingclientrect()，你可以获取触发点击事件的元素相对于视口的位置和尺寸信息。
● 我们也可以获得当前滚动位置的 x 轴和 y 轴坐标
const btnscrollto = document.queryselector('.btn--scroll-to');
const section1 = document.queryselector('#section--1');
btnscrollto.addeventlistener('click', function (e) {
const slcoords = section1.getboundingclientrect();
console.log(slcoords);
console.log(e.target.getboundingclientrect());
console.log('current scrll (x/y)', window.scrollx, window.screeny);
});
● 我们也可以输出输出视口（viewport）的高度和宽度，也就是可见视口的高度
console.log(
'height/width viewport',
document.documentelement.clientheight,
document.documentelement.clientwidth
);
● 现在就简单了，我们只需要点击按钮的时候更改一下我们想要的章节坐标即可
const btnscrollto = document.queryselector('.btn--scroll-to');
const section1 = document.queryselector('#section--1');
btnscrollto.addeventlistener('click', function (e) {
const slcoords = section1.getboundingclientrect();
// console.log(slcoords);
// console.log(e.target.getboundingclientrect());
// console.log('current scrll (x/y)', window.scrollx, window.screeny);
// console.log(
// 'height/width viewport',
// document.documentelement.clientheight,
// document.documentelement.clientwidth
// );
window.scrollto(slcoords.left, slcoords.top);
});
● 现在确实可以跳转了，但是细心的小伙伴会发现，这个必须在顶部才能正常跳转，往下面滑动一点就不行了，因为页面滑动就会章节的到顶部的x轴就会变动，我们必须加上滑动的距离才可以
const btnscrollto = document.queryselector('.btn--scroll-to');
const section1 = document.queryselector('#section--1');
btnscrollto.addeventlistener('click', function (e) {
const slcoords = section1.getboundingclientrect();
// console.log(slcoords);
// console.log(e.target.getboundingclientrect());
// console.log('current scrll (x/y)', window.scrollx, window.screeny);
// console.log(
// 'height/width viewport',
// document.documentelement.clientheight,
// document.documentelement.clientwidth
// );
window.scrollto(
slcoords.left + window.scrollx,
slcoords.top + window.scrolly
);
});
● 现在在任何视口都可以跳转了，但是跳转有点生硬，我们要给他这是平滑滚动
const btnscrollto = document.queryselector('.btn--scroll-to');
const section1 = document.queryselector('#section--1');
btnscrollto.addeventlistener('click', function (e) {
const slcoords = section1.getboundingclientrect();
// console.log(slcoords);
// console.log(e.target.getboundingclientrect());
// console.log('current scrll (x/y)', window.scrollx, window.screeny);
// console.log(
// 'height/width viewport',
// document.documentelement.clientheight,
// document.documentelement.clientwidth
// );
// window.scrollto(
// slcoords.left + window.scrollx,
// slcoords.top + window.scrolly
// );
window.scrollto({
left: slcoords.left + window.scrollx,
top: slcoords.top + window.scrolly,
behavior: 'smooth',
});
});
现在可以实现平滑滚动了，但是上述的操作都是比较老的操作方法了，对于现代浏览器，我们有更加现代的方法去实现平滑滚动；
const btnscrollto = document.queryselector('.btn--scroll-to');
const section1 = document.queryselector('#section--1');
btnscrollto.addeventlistener('click', function (e) {
const slcoords = section1.getboundingclientrect();
section1.scrollintoview({ behavior: 'smooth' });
});
这样就可以更加现代化的实现平滑滚动了，但是可能会存在老的浏览器不兼容的问题，但是现代化的实现方法的逻辑也是按照我们上面的步骤来执行的！
以上就是javascript实现平滑滚动效果的详细内容，更多关于javascript平滑滚动的资料请关注代码网其它相关文章！
发表评论