How to create js code for several anchor links?

Question

There is an html-code in which there are several anchor links, at the top there is a fixed menu with fixed heights. You need to make a js-code that, when using one of the anchor links, will transfer not to the anchor itself, but 140 pixels lower ...

as I understand it is necessary to first create an array var arrYakor = [], and how to fit all id into it?
I understood correctly you need something like that css-tricks.com/snippets/jquery/smooth-scrolling

lexxl lexxl 5,051 2 13 35 · Accepted Answer · 2017-02-07T09:50:29

Made for clarity: this code makes a smooth scroll to the anchor, but stops 100 pixels higher.

$(document).ready(function() { $('a[href^="#"]').bind('click',function (e) { e.preventDefault(); var target = this.hash, $target = $(target); $('html, body').stop().animate({ 'scrollTop': $target.offset().top - 100 }, 900, 'swing', function () { window.location.hash = target; }); }); });

 .one { height: 1000px; background: tomato; } .two { height: 1000px; background: silver; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <nav> <ul> <li><a href="#one">1</a></li> <li><a href="#two">2</a></li> </ul> </nav> <div class="one" id="one">1</div> <div class="two" id="two">2</div>

Qwertiy ♦ Qwertiy 76k 17 73 199 · Answer 2 · 2017-02-07T09:48:30

This can be done without scripts:

 body { margin: 0; } nav { position: fixed; height: 2rem; line-height: 2rem; top: 0; width: 100%; background: silver; } section { padding-top: 2rem; margin-bottom: -2rem; } section:last-child { margin-bottom: 0; }

 <nav> <a href="#s1">Section 1</a> <a href="#s2">Section 2</a> <a href="#s3">Section 3</a> <a href="#s4">Section 4</a> <a href="#s5">Section 5</a> </nav> <section id="s1"> <h1>Section 1</h1> <p>Есть html-код, в котором несколько якорных ссылок, вверху фиксированная менюшка с фиксированной высотой. Нужно сделать js-код, который при использовании одной из якорных ссылок будет переносить не на сам якорь, а на 140 пикселей ниже...</p> </section> <section id="s2"> <h1>Section 2</h1> <p>Есть html-код, в котором несколько якорных ссылок, вверху фиксированная менюшка с фиксированной высотой. Нужно сделать js-код, который при использовании одной из якорных ссылок будет переносить не на сам якорь, а на 140 пикселей ниже...</p> </section> <section id="s3"> <h1>Section 3</h1> <p>Есть html-код, в котором несколько якорных ссылок, вверху фиксированная менюшка с фиксированной высотой. Нужно сделать js-код, который при использовании одной из якорных ссылок будет переносить не на сам якорь, а на 140 пикселей ниже...</p> </section> <section id="s4"> <h1>Section 4</h1> <p>Есть html-код, в котором несколько якорных ссылок, вверху фиксированная менюшка с фиксированной высотой. Нужно сделать js-код, который при использовании одной из якорных ссылок будет переносить не на сам якорь, а на 140 пикселей ниже...</p> </section> <section id="s5"> <h1>Section 5</h1> <p>Есть html-код, в котором несколько якорных ссылок, вверху фиксированная менюшка с фиксированной высотой. Нужно сделать js-код, который при использовании одной из якорных ссылок будет переносить не на сам якорь, а на 140 пикселей ниже...</p> </section>

an interesting option, but what if section has a background - will it flow onto the upper block?
@lexxl, I suggest giving an example, asking a separate question with it and giving a link.
Because, firstly, there will not be, secondly, not on, but under, what will appear only with a transparent background of the title, and thirdly, how do you imagine the scroll not to affect it?
And in general, colors section, but not the parent, strange.
And finally, probably, everything is solved by an additional container.
if elementary through the debugger to add a color background of each section in your code, then it will be seen that the last line of the section will be covered with the background of the section following / under it.
so, firstly, secondly, not "under", but "on", thirdly, it finally can not understand what you are talking about) but painting the section is just the same rules, because it is a container for a separate block with info, in which its title and content, and then maybe your background image / color
imgur.com/a/5CUjM added two different backgrounds and a border

Arsen arsen 4,865 2 6 20 · Answer 3 · 2017-02-07T09:27:14

I think this example will help you (you can customize your menu structure)

 $(document).ready(function(){ $('a').on('click',function(e){ e.preventDefault(); var anch = $(this).attr('href').split('#'); var items = $('#'+anch[1]).position().top + 140; var body = $("html, body"); body.stop().animate({scrollTop:items+'px'}, '800', 'swing'); console.log(items); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li><a href="#menu1">Меню 1</a></li> <li><a href="#menu2">Меню 2</a></li> <li><a href="#menu3">Меню 3</a></li> </ul> <div> <p id="menu1">Контент</p> <p id="menu2">Контент</p> <p id="menu3">Контент</p> </div>

Yes, anchor links work fine, but all the others do not work at all, do not go to the right pages, gave the class to all anchor links .anchor and wrote it does not work: (($ ('a.anchor'). on ('click', function (e)
@Ivan Can you give me a Lexxl answer, marked as the correct answer?
after installing a specific class $ ('a.anchor') other links do not work?

How to create js code for several anchor links?

3 answers 3

More articles: