Кнопка навигации

$(document).ready(function() { 
  let scroll_link = $('.scroll'); 
 
  scroll_link.click(function(e) { 
    e.preventDefault(); 
    let url = $('body').find($(this).attr('href')).offset().top; 
    $('html, body').animate({ 
      scrollTop: url 
    }, 700); 
    $(this).parent().addClass('active'); 
    $(this).parent().siblings().removeClass('active'); 
    return false; 
  }); 
});

* { 
  margin: 0; 
  padding: 0; 
} 
 
body { 
  height: 100vh; 
} 
 
.jumbotron-fluid { 
position: relative; 
  width: 100%; 
  height: 100vh; 
} 
 
.nav { 
  background: #fff; 
  position: fixed; 
  top: 0; 
  left: 0; 
  right: 0; 
  height: 50px; 
  z-index: 10; 
} 
 
.nav-item { 
  display: inline-block; 
  height: 50px; 
  line-height: 50px; 
  margin: 0 10px; 
} 
 
.nav-item.active .nav-link { 
  color: #cb356b; 
} 
 
.display { 
  color: #fff; 
  display: block; 
  margin-top: 0px; 
  position: sticky; 
  top: 50px; 
} 
 
.one { 
  background: chocolate; 
} 
 
.two { 
  background: rosybrown; 
} 
 
.three { 
  background: green; 
} 
 
.four { 
  background: cornflowerblue; 
} 
 
button { 
  display: block; 
  margin: 30px; 
  padding: 30px; 
  top: 55px; 
} 
 
#elem { 
padding-top: 55px; 
} 
.elem { 
  margin: 30px; 
  padding: 30px; 
  margin-top: 0px; 
  position: sticky; 
  background-color: red; 
  color: white; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="container-fluid"> 
  <ul class="nav fixed-top"> 
    <li class="nav-item active"> 
      <a class="nav-link scroll" href="#one">Один</a> 
    </li> 
    <li class="nav-item"> 
      <a class="nav-link scroll" href="#two">Два</a> 
    </li> 
    <li class="nav-item"> 
      <a class="nav-link scroll" href="#three">Три</a> 
    </li> 
    <li class="nav-item"> 
      <a class="nav-link scroll" href="#four">Четыре</a> 
    </li> 
  </ul> 
  <div class="jumbotron-fluid text-center one" id="one"> 
    <span class="display">Один<a class="scroll" href="#elem"><button>Кнопка</button></a></span> 
 
  </div> 
  <div class="jumbotron-fluid text-center two" id="two"> 
    <span class="display">Два</span> 
    <div id="elem"><div class="elem">Опреденный элемент страницы</div></div> 
  </div> 
  <div class="jumbotron-fluid text-center three" id="three"> 
    <span class="display">Три</span> 
  </div> 
  <div class="jumbotron-fluid text-center four" id="four"> 
    <span class="display">Четыре</span> 
  </div> 
</div>