浏览网页时经常会看到在页面里,鼠标点击标题按钮,页面迅速向下或者向上滚动到和按钮文字相关的内容区,这种平滑滚动的效果比起生硬的跳转,给用户的体验会好很多,那么这种效果是怎么实现的呢,今天就让长沙网站建设来告诉您把!

HTML与JS代码如下:(来源于:长沙网站制作)

在这个JS代码中.我们主要使用了"preventDefault",禁止了点击按钮触发的锚点跳转效果.获取对应元素的ID,最后通过"top:target.offsetTop,behavior:'smooth'",将页面平滑的滚动到对应位置.

页面效果大致如下所示.

在长沙网站开发的示例图中,点击'第三段落'的按钮的瞬间,页面将会缓慢的滚动到第三段落的内容区.

以上就是长沙网站建设整理出的让页面平滑滚动到锚点位置的方法,这种效果能够大大提升用户的浏览体验,希望能对您有所帮助！

长沙蒲公英网络作为长沙网站建设、长沙网站制作、长沙网站设计、长沙网站开发、长沙做网站等领域的专业公司,将一如既往地为客户提供优质的网站优化服务,为企业的发展保驾护航.