Кнопка ссылки на заголовок на той же странице - PullRequest
Новая
       3

Кнопка ссылки на заголовок на той же странице

0 голосов
/ 29 марта 2020

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

<Button className="sec-btn"> <a href="/ Antsy services"> Get Started</a> </Button>

Я хочу, чтобы пользователи нажимали кнопку «Начать» и затем связывали это с заголовком «Служба Antsy» на той же странице. 

<h1 className="heading-1">Antsy services</h1>

Ответы [ 4 ]

2 голосов
/ 29 марта 2020

Что я понимаю из этого вопроса, так это то, что у вас есть элемент привязки тега href, при нажатии которого вы хотите прокрутить страницу вниз до другого элемента.

Вы можете использовать идентификаторы как форму связи между элементами на той же странице.

Решение

Просто дайте элемент, который вы хотите прокрутить до идентификатора, и затем в теге привязки вы можете предоставить ссылку на него через href. 

<a href="#test">
  <button> click me </button>
</a>

<div class="space"></div>

<div id="test">
  <p> hello </p>
</div>

Вот кодовая ручка для него, чтобы было легче увидеть эффект.

https://codepen.io/shanecreedon/pen/poJGovK

0 голосов
/ 29 марта 2020

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

Попробуйте, 

<html>
  <head>
    <title>Example</title>
    <style>
      h1{
         height : 100vh;
         background: skyblue;
      }
      h2{
         height: 100vh;
         background: #c0c0c0;
      }
      h3{
         height: 100vh;
         background: #a0faf9;
          
      }
    </style>
  </head>
  <body>
     <a href="#home">Home</a>
     <a href="#services">Services</a>
     <a href="#contact">Contact</a>

  
     <h1 id="home">Home Section</h1>
     <h2 id="services">Services Section</h1> 
     <h3 id="contact">Contact Section</h1> 
  </body>
</html>
0 голосов
/ 29 марта 2020

Вы должны использовать синтаксис селектора идентификаторов, как это. Заголовок должен иметь селектор идентификатора ... 

<h1 id="heading-1">Antsy services</h1>

Тогда вы можете сделать ссылку на раздел страницы следующим образом: 

<a href="/Antsy services#heading-1"> Get Started</a>
0 голосов
/ 29 марта 2020

Вам нужны якорные ссылки.

Как их создавать и использовать:

  1. добавить id="example" к какому-либо элементу на странице
  2. добавьте <a href="#example">Scroll me to example element</a> вверху вашей страницы
  3. нажмите и посмотрите, что произойдет
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...