前端小案例——导航回顶部（HTML+CSS+JS, 附源码）

一、前言

实现功能：

        这个案例实现了页面滚动到一定位置时显示"回到顶部"按钮，并且点击按钮能够平滑滚动回页面顶部的功能。

实现逻辑：

1. 页面结构：通过HTML标签定义了页面的基本结构。页面主要由多个div.content组成，每个div都有不同的背景颜色，用来模拟页面内容。此外，还有一个div.nav作为侧边的导航栏，里面包含了几个列表项（li），每个列表项都有一个图标（使用svg）和文字描述（p标签），用来表示不同的功能。

2. 样式设计：通过CSS设置了页面的样式。这包括对页面内容、导航栏以及导航项的样式设定，如位置、大小、颜色等。特别地，back-to-top按钮（回顶部）默认是不显示的（display: none;），只有当页面滚动到一定程度时才会显示出来。

3. 交互逻辑：通过JavaScript添加了页面的交互功能。

   • 监听scroll事件：当页面滚动时，检查页面的垂直滚动位置（window.scrollY或document.documentElement.scrollTop）。如果滚动位置超过300px，则显示回顶部按钮；否则，隐藏该按钮。
   • 监听回顶部按钮的点击事件：当点击回顶部按钮时，页面平滑滚动到顶部。这是通过调用window.scrollTo方法并设置top: 0以及behavior: 'smooth'来实现的，其中top: 0意味着滚动到页面顶部，behavior: 'smooth'则使得滚动过程平滑进行。

二、项目运行效果

三、全部代码

    
    
    
    


    

    

    

    

    

    

    

        

            

                
                
首页
            
            

                
                
客服
            
            

                
                
反馈
            
            

                
                
举报
            
            

                
                
回顶部
            
        
    
    

四、答疑解惑

        这是一个非常适合前端入门练习的小案例，各位小伙伴可以自行更改样式和图片，如果大家运行时出现问题或代码有什么不懂的地方都可以随时评论留言或联系博主QQ。

        还多请各位小伙伴多多点赞支持，你们的支持是我最大的动力。

博主QQ：1196094293

谢谢各位的支持~~