js 锚点 |smooth roll

// 右侧/左侧图片都是遍历出来的,下面只举其中一个例子
// 重点在于传给smooth()方法的参数需要对应左侧图片的id

// 右侧小图img
 smooth("bigImg")}>
    


// 左侧大图img



const smooth = (id) => {
    let anchorElement = document.getElementById(id);
    if (anchorElement) {
      anchorElement.scrollIntoView({ behavior: "smooth" });
    }
}

需求:点击右侧列表中的小图,定位到左侧文章中的大图,且缓慢滚动

注意:使用的href属性只会直接跳转到对应锚点,很僵硬。要想设置缓慢滚动效果,就可以像上面的方法一样,使用scrollInfoView()来实现。

你可能感兴趣的:(前端,React,JS,javascript,前端)