Как прокрутить до идентификатора с помощью навигатора

I; m abegginer с помощью javascript/jQuery, но я хочу щелкнуть элемент navbar, а затем прокрутить страницу вниз до соответствующего ему идентификатора. (Идентификаторы: #home, #about, #portafolio, #contact)Как прокрутить до идентификатора с помощью навигатора

Вот мой список Navbar:

<nav class="navbar navbar-default navbar-static-top navbar-fixed-top"> 
    <div class="container-fluid"> 
    <ul class="nav navbar-nav navbar-right"> 
    <li role="presentation" class="active"><a href="#">Home</a></li> 
    <li role="presentation"><a href="#">About</a></li> 
    <li role="presentation"><a href="#">Portafolio</a></li> 
    <li role="presentation"><a href="#">Contact</a></li> 
    </ul>

Моя попытка с помощью https://github.com/flesler/jquery.scrollTo/blob/master/README.md:

$('ul li').first().click().scrollTo('#home'); 
$('ul li').eq(1).click().scrollTo('#about'); 
$('ul li').eq(2).click().scrollTo('#portfolio'); 
$('ul li').eq(3).click().scrollTo('#contact');

Любой человек может помочь мне в том, как даже создать надлежащую функцию для его работы? Благодарю.

источник

2017-01-27 tadm123

Вы можете сделать это без использования jQuery. В якорных тегах в ваших навигационных элементах. поместите идентификатор раздела в href.

Так что-то вроде

<li><a href="#about">About</a></li> 
<li><a href="#contact">Contact</a><li>

Здесь «о» и «контакт» являются идентификаторами секции о и контактов.

источник

2017-01-27 05:41:32

Спасибо, не могу поверить, что я этого не заметил. – tadm123

Хотя, вы можете сделать это даже с помощью jQuery. lookup window.location.hash, но вы не должны усложнять ситуацию. –

Я все еще на начальных этапах даже html, спасибо еще раз:/ – tadm123

Я покажу вам пример, на котором вы можете внести необходимые изменения в свой код.

<div class="collapse navbar-collapse" id="myNavbar"> 
    <ul class="nav navbar-nav navbar-right"> 
    <li><a href="#about">ABOUT</a></li> 
    <li><a href="#services">SERVICES</a></li> 
    <li><a href="#portfolio">PORTFOLIO</a></li> 
    <li><a href="#pricing">PRICING</a></li> 
    <li><a href="#contact">CONTACT</a></li> 
    </ul> 
</div>

"#about", "# services" и т. Д. Являются идентификаторами, предоставленными div. Теперь нажмите на ссылку О ссылке, чтобы перейти к конкретному div.

источник

2017-01-27 05:50:09 Soni

Ваш ответ дубликат Ayush Bahuguna's. Не круто. –

Как прокрутить до идентификатора с помощью навигатора

ответ

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