Почему при вызове бокового меню, меня возвращает на верх сайта

$('.menu_btn').on('click', function(){ 
	$('.menu').toggleClass('menu_active'); 
	$('.menu_btn').toggleClass('btn_closed'); 
}) 
$('.fa-times').on('click', function(){ 
	$('.menu_btn').toggleClass('btn_active'); 
    $('.menu').toggleClass('menu_active'); 
})

.menu{ 
	position: fixed; 
	right:0; 
	top:0; 
	width:300px; 
	height: 100vh; 
	background: #000; 
	transition: 1s all ease; 
	transform: translateX(100%); 
	z-index: 99; 
} 
.menu_active{ 
	transform: translateX(0); 
} 
.menu_closed{ 
	transform: translateX(-100%); 
} 
.btn_closed{ 
	transform: translateX(400%); 
	transition: all 0s ease; 
} 
.btn_active{ 
	transform: translateY(0); 
	transition: all 1.4s ease; 
} 
.menu_list{ 
	display: flex; 
	justify-content: space-around; 
	align-items: left; 
	height: 50%; 
	flex-direction: column; 
	margin:40px 30px; 
} 
.menu_btn{ 
	text-decoration: none; 
	color:#FFF; 
	width: 300px; 
	background: #000; 
	width: 100px; 
	padding:  10px; 
	display: flex; 
	position: fixed; 
	left: -170px; 
	top:10px; 
	z-index: 9; 
	background: #000; 
	justify-content: space-around; 
	font-family: 'Titillium Web', sans-serif; 
} 
.menu_btn p{ 
	padding-top: 6px; 
	font-size: 15px; 
	color:#78D77C; 
} 
 
#navigation{ 
    font-size: 13px; 
    color:#78D77C; 
    text-transform: uppercase; 
    letter-spacing: 0.13em; 
    padding-top: 100px; 
    margin-bottom: 50px; 
} 
.fa-times{ 
    position: absolute; 
    right: 20px; 
    top:7px;    
    color:#FFF; 
} 
.fa-times:hover{ 
	cursor: pointer; 
} 
.menu_list a{ 
    display: block; 
    font-size:20px; 
    color:#FFF; 
    letter-spacing: 0.05em; 
    font-family: 'Libre Baskerville', serif; 
    padding-top:20px; 
} 
#menu_descr{ 
    font-size: 15px; 
    color:#414141; 
    margin-top:50px; 
    padding-bottom: 30px; 
} 
.soc_net i{ 
    color:#414141; 
    margin-right:  20px; 
    margin-left:3px; 
} 
.soc_net i:hover{ 
	color: #FFF; 
	cursor: pointer; 
} 
nav{ 
	position: relative; 
	font-family: 'Libre Baskerville', serif; 
}

<div class="menu"> 
						<a href="#" id="menu_btn" class="menu_btn"><p>MENU</p><i class="fas fa-bars fa-2x "></i></a> 
						<nav class="menu_list"> 
							 <p id="navigation">navigation</p> 
							 <i id="fa-times" class="fas fa-times"></i> 
                               <a href="#">Home</a> 
                               <a href="#">About</a> 
                               <a href="#">Services</a> 
                               <a href="#">Works</a> 
                               <a href="#">Cliens</a> 
                               <a href="#">Contacts</a> 
                               <p id="menu_descr">Perspiciatis hic praesentium nesciunt. Et neque a dolorum voluptatem porro iusto sequi veritatis libero enim. Iusto id suscipit veritatis neque reprehenderit.</p> 
                               <div class="soc_net"> 
                                <i class="fab fa-twitter fa-2x"></i> 
                                <i class="fab fa-instagram  fa-2x"></i> 
                                <i class="fab fa-facebook  fa-2x"></i> 
                                <i class="fab fa-vk  fa-2x"></i> 
                               </div> 
						</nav> 
					</div>