1

Как сделать кнопку навигации по сайту, или же чтоб кнопка переводила на опреденный элемент страницы?

2 ответа 2

1

Использовав якоря http://htmlbook.ru/samhtml/yakorya

Ссылку делаете вида href="#anchor"

и добавив к элементу id="anchor"

Или вам что-то другое нужно? По вопросу сложно понять что конкретно вы хотите получить. Будет проще если покажите код, и объясните что требуется реализовать в нем.

0

Возможно, здесь есть всё что вам нужно:

$(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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.