2013-06-29 4 views
3

Я хотел бы создать кнопку HTML, которая действует как ссылка на элемент на той же странице. Таким образом, когда вы нажимаете кнопку, она перенаправляется на элемент на той же странице.Как создать кнопку HTML, которая действует как ссылка на элемент на той же странице?

Как это сделать? (Я бы ограничить решение HTML, CSS и JavaScript, поскольку в настоящее время я не использую любой другой язык)

тока Кнопка (Bootstrap):

<a class="btn btn-large btn-primary" href="">Democracy</a> 
+0

К какому элементу вы хотите подключиться? –

ответ

3

Это при условии, что вы не говорите о прокрутки вниз к обычному якорем, и вместо этого вы хотите для прокрутки до фактических элементов HTML на странице.

Я не уверен, что jQuery рассчитывает на вас, но если вы используете Bootstrap, я думаю, это так. Если это так, вы можете привязать к событию «щелчок» для своей кнопки и поместить туда некоторый код javascript для обработки прокрутки. Как правило, вы можете связать ссылку/с элементом, который вы хотите прокрутить, используя атрибут «data» (например, data-scroll = «my-element-id»).

Без jQuery вам нужно будет сделать функцию, которая содержит код, как описано, и поместить в атрибут onclick, который ссылается на вашу функцию, и передает «это» в качестве параметра вашей функции, поэтому вы можете получить ссылку на элемент link/button, который вызвал его.

Для кода использовать фактически выделите соответствующий элемент, проверить эту статью:

How to go to a specific element on page?

Быстрый пример без JQuery:

<a class="scrollbutton" data-scroll="#somethingonpage" 
onchange="scrollto(this);">something on page</a> 

<div id="somethingonpage">scrolls to here when you click on the link above</a> 

<script type="text/javascript"> 
    function scrollto(element) { 
     // get the element on the page related to the button 
     var scrollToId = element.getAttribute("data-scroll"); 
     var scrollToElement = document.getElementById(scrollToId); 
     // make the page scroll down to where you want 
     // ... 
    } 
</script> 

С JQuery:

<a class="scrollbutton" data-scroll="#somethingonpage">something on page</a> 

<div id="somethingonpage">scrolls to here when you click on the link above</a> 

<script type="text/javascript"> 
    $(".scrollbutton").click(function() { 
     // get the element on the page related to the button 
     var scrollToId = $(this).data("scroll"); 
     var scrollToElement = document.getElementById(scrollToId); 
     // make the page scroll down to where you want 
     // ... 
    }); 
</script> 

Примечание: Если вы буквально хотите "но тонна», а не„ссылка“, вы действительно можете использовать любой элемент и сделать это интерактивным, например:

<button class="scrollbutton" data-scroll="#somethingonpage">something on page</button> 
+0

приятно, но он хочет кнопку. –

+0

это действительно то же самое, но я добавил примечание о фактической «кнопке» там, в конце в соответствии с вашим комментарием –

+0

Хороший и подробный ответ ... @ Энди Мудрак –

4

Try:

<button onclick="window.location.href='location'">Button Name</button 
1

эй попробовать это: -

<button><a href="#A">Click Me</a></button> 

затем, к которому когда-либо место, куда вы хотите пойти на вашем сайте: -
у может просто поместить строку ниже, где вы хотите,

<a name="A"></a> 

надеюсь, что он работает для вас

+1

'herf' не является допустимым атрибутом' href', однако * is *; следовательно, моя коррекция вашей опечатки. –

+0

извините, просто орфографическая ошибка :) –

+0

Итак, почему бы вам откатить действительное редактирование? Также недопустимо вставлять любые интерактивные элементы в другой интерактивный элемент (например, 'a',' input', 'button' и т. Д.). –

0

Это простой способ сделать это

<a href="link.html"> <button type="button""> Click </button> </a> 
0

закладки своего товара на ту же страницу, на которую вы хотите перенаправить, присвоив ей идентификатор. Предположим, id = "itemId", затем используйте <a class="btn btn-large btn-primary" href="#itemId">Democracy</a>. Когда вы нажмете кнопку, вы будете перенаправлены на часть страницы, содержащую этот элемент.

 Смежные вопросы

  • Нет связанных вопросов^_^