长沙网站建设教您实现一键返回网页顶部

一、效果简介

在页面较长的网站内,为了提升用户的体验,程序员一般会将顶部导航栏设置为浮动的,便于用户离开并进入到其他页面.但除了将导航悬浮外,还有一种方式也可以方便用户,并且带来的视觉效果远胜导航栏悬浮.这就是今天长沙网站制作想教您的,一键返回网页顶部的效果.

二、页面JS代码展示

通俗的说,这种效果就是:点击特定按钮,让页面自动往上滚动,直到回到网页顶部.

我们首先制作一个按钮,使用css将其定位在浏览器窗口的左下角.又因为在初始打开页面时,是不需要这个效果的,所以先将按钮隐藏.

通过代码判断：

 window.addEventListener('scroll', function() {
    if (window.pageYOffset > 500) {
        gotop.classList.add('hov');
        } else {
            gotop.classList.remove('hov');
        }
});

当页面滚动的距离超过500px时,给按钮添加一个 hov 类名,这个类名的样式为:visibility: visible;所以此时可以看到,原本被长沙网站开发隐藏的按钮又显示出来了.

再通过代码控制：

 gotop.addEventListener('click', function(e) {
      e.preventDefault();
      window.scrollTo({
            top: 0,
            behavior: 'smooth'
      });
});

在按钮被点击时触发事件,页面将自动的、平滑的向上滚动,直到回到网页顶部再停下来.并也再次触发了之前的代码,将按钮的hov类名去掉,重新将它隐藏.

三、效果视频展示

四、应用扩展

这个效果也是较为常见的,在许多企业网站,购物网站上都能看到.

并且可能不止是回到页面顶部,通过修改代码,也可以让页面从顶部滚动到页面底部,或者是任意一个位置等等.

以上则是长沙网站建设整理出的点击按钮页面平滑滚动回顶部的实现方法,希望对您有所帮助!

长沙蒲公英网络专业提供高效且优质的网站优化服务,为您的企业的发展保驾护航! 欢迎来电咨询:0731-84069615.