Skip to main content
M
margot-jo
Inspiring
November 22, 2019
Answered

Link zum Anker geht auf die Seite, aber nicht auf den Anker

  • November 22, 2019
  • 2 replies
  • 5629 views

Hallo,

ich habe eine Downloadseite mit mehreren Links zu Ankern auf einer anderen Seite. Der Link springt zwar zu dieser Seite, aber nicht zu den einzelnen Ankern. So muss man trotz Anker scrollen, um auf untere Textstellen zu kommen.

Allerdings ist es kein Text, sondern eine 2-spaltige Tabelle mit einigen Zeilen. Aber kann es daran liegen?

Gruß

Margot-Jo

This topic has been closed for replies.
Correct answer osgood_

No, it would not be because you are using a two-column table. Don't use anchors, use unique 'ids' like below: They dont need to be called, one, two, three etc- you can name the 'ids' whatever you like, so long as each id is only used once per page.

 

<h4 id="one">Box 1</h4>

<h4 id="two">Box 2</h4>

<h4 id="three">Box 3</h4>

<h4 id="four">Box 4</h4>

<h4 id="five">Box 5</h4>

<h4 id="six">Box 6</h4>

 

Then in your link page point to the ids:

 

<a href="go-to-box.html#one">Box 1</a>
<a href="go-to-box.html#two">Box 2</a>
<a href="go-to-box.html#three">Box 3</a>
<a href="go-to-box.html#four">Box 4</a>
<a href="go-to-box.html#five">Box 5</a>
<a href="go-to-box.html#six">Box 6</a>

2 replies

P
PizzaPasta
Inspiring
December 14, 2020

Hallo alle

seit dieser Antwort wurde DW weiterentwickelt und Bootstrap 4 eingefügt.

Vieles ist einfacher geworden - das ist ganz toll!

Leider funktioniert das Springen zum Link nicht mehr wie früher und wie es auch oben beschrieben ist.

Wo kann ich / muss ich den Anker im Accordion setzen, damit von einer anderen Seite aus genau das gewünschte Panel geöffnet wird? Ich habe es nicht geschafft, obwohl ich vieles ausprobiert habe und bin darum dankbar für Hilfe.

Danke PizzaPasta

O
osgood_
Legend
December 14, 2020

Hello, I'm not quite sure what it is you require.

 

Are you trying to open a specific Bootstrap Accordion panel when a link/s on another webpage is/are clicked linking to the page which displays the Bootstrap Accordion?

 

If so then you can do that by passing url parameters to the page where the Bootstrap Accordion is displayed.

 

Example: The Bootstrap 4 Accordion component, by default, allocates a uniquie id to each panel:  collapseOne, collapseTwo , collapseThree etc and a unique id for the accordion header: headingOne, headingTwo, headingThree etc

 

Set up any external link/s, those which point to the page where the Bootstrap Accordion is being displayed, as below: (obviously replace 'bootstrapAccording.html' with the name of your page)

 

<a href="bootstrapAccordion.html?panel=collapseOne&header=headingOne">Panel 1</a>
<a href="bootstrapAccordion.html?panel=collapseTwo&header=headingTwo">Panel 2</a>
<a href="bootstrapAccordion.html?panel=collapseThree&header=headingThree">Panel 3</a>

 

 

Then on the page where the Bootstrap Accordion is being displayed add some javascript, directly before the closing </body> tag:

 

<script>
var urlParams = new URLSearchParams(window.location.search);
document.getElementById(urlParams.get('panel')).classList.add('show');
document.getElementById(urlParams.get('header')).scrollIntoView();
</script>

 

When a link is clicked from an external page to the Bootstrap Accordion page the page should scroll to where the Bootstrap Accordion has been inserted and the correct accordion panel should be open.

 

 

P
PizzaPasta
Inspiring
December 14, 2020

Hello

Thanks for the quick reply.
Yes, it is exactly what I am looking for.

And it's a nice bit better than before, but unfortunately not quite perfect yet.
Example:

I want to open the second panel of the acccordion, so I put the external link <a href="mypage.html?panel=collapseTwo&header=headingTwo">Panel 2</a>.

It actually opens the second panel, but the first panel is open likewiese.

Similarly, the third panel is open, but the accordion still shows the first one.

It seems, that opening the first panel is a very important command.

Can you help me again? That would be great! Thanks

PizzaPasta

O
osgood_Correct answer
Legend
November 22, 2019

No, it would not be because you are using a two-column table. Don't use anchors, use unique 'ids' like below: They dont need to be called, one, two, three etc- you can name the 'ids' whatever you like, so long as each id is only used once per page.

 

<h4 id="one">Box 1</h4>

<h4 id="two">Box 2</h4>

<h4 id="three">Box 3</h4>

<h4 id="four">Box 4</h4>

<h4 id="five">Box 5</h4>

<h4 id="six">Box 6</h4>

 

Then in your link page point to the ids:

 

<a href="go-to-box.html#one">Box 1</a>
<a href="go-to-box.html#two">Box 2</a>
<a href="go-to-box.html#three">Box 3</a>
<a href="go-to-box.html#four">Box 4</a>
<a href="go-to-box.html#five">Box 5</a>
<a href="go-to-box.html#six">Box 6</a>

M
margot-joAuthor
Inspiring
November 22, 2019

Thank you very much! I'll try to make it like this. Why did you put "h"4 before "id"? Isn't it the size of the font or title?

 

Margot-Jo

O
osgood_
Legend
November 23, 2019

The use of the h4 tag was just an example of where you could apply an id.

 

You could apply the id to a paragraph tag or a span tag, a td tag etc.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices