JS实现点击回到顶部并改变导航栏高度

水深无声 2023-02-08 14:28 23阅读 0赞

## 实现思路 ##

HTML部分给导航栏及回到顶部css设置为固定定位fixed，通过js的onscroll滚动事件获取页面滚动距离进行判断，当滚动距离大于10时，显示回到顶部按钮，改变导航栏高度。当点击回到顶部按钮时，调用定时器方法，改变scrollTop的值回到顶部。

## HTML ##

**head导入向上箭头链接**

**body里面代码**

<div class="header" id="header-top">
    		<ul>
    			<li>吃惊</li>
    			<li>卧槽</li>
    			<li>我的天</li>
    			<li>HTML</li>
    			<li>JavaScript</li>
    		</ul>
    	</div>
    	
    	
    	
    	<div class="icon" id="icon">
    		<i class="fa fa-chevron-up fa-3x" aria-hidden="true"></i>
    	</div>

# CSS #

*{ 
    		margin: 0;
    		padding: 0;
    	}
    	body{ 
    		height: 1500px;
    	}
    	.header{ 
    		width: 100%;
    		height: 100px;
    		position: fixed;
    		top: 0;
    		left: 0;
    		background-color: #00FFFF;
    		transition: height 0.3s;
    	}
    	.header.fixed{ 
    		height: 50px;
    		box-shadow: 0 0 1px 0 rgba(0,0,0,.3),
    		0 0 6px 2px rgba(0,0,0,.15);
    	}
    	.header li{ 
    		float: left;
    		margin-left: 50px;
    		margin-top: 15px;
    		list-style: none;
    	}
    	.icon{ 
    		background-color: rgba(0,0,0,0.2);
    		position:fixed;
    		bottom: 50px;
    		right: 30px;
    		
    	}

## Js代码 ##

## 实现效果 ##

**实现前**  
![实现前，回到顶部不显示，高度不变][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpZ19waWczMg_size_16_color_FFFFFF_t_70]  
**实现后**  
![实现后，回到顶部图片显示，点击可回到顶部，导航栏高度变小][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpZ19waWczMg_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpZ19waWczMg_size_16_color_FFFFFF_t_70]: /images/20230208/771df2ba6ad64c40b55d7e22968281c7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpZ19waWczMg_size_16_color_FFFFFF_t_70 1]: /images/20230208/4199026150774cd6ae190ec9f803db00.png