Блог

Главная - Вопросы по программированию - Нажимать на ссылки и перенаправлять на этот контент

Нажимать на ссылки и перенаправлять на этот контент

#javascript #jquery

#javascript #jquery

Вопрос:

Я пытаюсь создать функцию, в которой вверху будет несколько ссылок, а содержимое будет загружено по умолчанию с заголовками на той же странице. Ссылки и заголовок будут связаны, поэтому нажатие на ссылки перенаправит на этот конкретный раздел с эффектом (аналогично одностраничному приложению). Пример:

 Vision Mission Address Contact

Vision
Content here 

Mission
Content here 

Address
Content here 

Contact
Content here

Я не уверен, как я могу это сделать, но создал образец, который на самом деле не похож, можно сказать, пробный. Это не то, что я хочу:

 $(document).ready(function()
{
  $(".subcontent").hide();

  $('#myMenu').on('click','a',function()
  {
    $('.subcontent:visible').hide();
    $('.subcontent[id=' $(this).attr('data-id') ']').fadeIn();
  });
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<ul id="myMenu">
  <li><a href="#" data-id="Vision">Vision</a></li>
  <li><a href="#" data-id="Mission">Mission</a></li>
</ul>


<section class="subcontent"  id="Vision" style="display:block" >
  <div class="page-heading">
     <h1 class="caption">Vision</h1>
  </div>
</section>

<section class="subcontent"  id="Mission" >
  <div class="page-heading">
     <h1 class="caption">Mission</h1>
  </div>
</section>

Комментарии:

1. Вы говорите об якорях? Проверьте это, его Contents окно работает с anchors

Ответ №1:

Надеюсь, приведенный ниже фрагмент поможет вам

 $(document).ready(function () {
  $('.top').click(function() {
  $('html, body').animate({
    scrollTop: $(".top-section").offset().top
  }, 1000)
}), 
  $('.middle').click(function (){
    $('html, body').animate({
      scrollTop: $(".middle-section").offset().top
    }, 1000)
  }),
  $('.bottom').click(function (){
    $('html, body').animate({
      scrollTop: $(".bottom-section").offset().top
    }, 1000)
  })
  
 $('.top-section').click(function (){
    $('html, body').animate({
      scrollTop: 0
    }, 1000)
  })
 $('.middle-section').click(function (){
    $('html, body').animate({
      scrollTop: 0
    }, 1000)
  })

  $('.bottom-section').click(function (){
    $('html, body').animate({
      scrollTop: 0
    }, 1000)
  })
});  
 body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  display: inline;
}

.top-section {
  background-color: green;
  height: 100%;
  width: 100%;
  display: flex;
}

.middle-section {
  background-color: yellow;
  height: 100%;
  width: 100%;
  display: flex;
}

.bottom-section {
  background-color: red;
  height: 100%;
  width: 100%;
  display: flex;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div>
    <h4>Click on Top,Middle.Bottom will take to the section,Click on Click on section will take to the Top</h4>
    
    <h5 class="top">Top</h5> 
    <h5 class="middle">Middle</h5> 
    <h5 class="bottom">Bottom</h5>
</div>
<div class="top-section">
    <h1>Top Section</h1>
</div>
<div class="middle-section">
    <h1>Middle Section</h1>
</div>
<div class="bottom-section">
    <h1>Bottom Section</h1>
</div>