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

Explorer ,
Nov 22, 2019 Nov 22, 2019

Copy link to clipboard

Copied

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

TOPICS
Error

Views

561

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Nov 22, 2019 Nov 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">

...

Likes

Translate

Translate
LEGEND ,
Nov 22, 2019 Nov 22, 2019

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 22, 2019 Nov 22, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Nov 23, 2019 Nov 23, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 24, 2019 Nov 24, 2019

Copy link to clipboard

Copied

Thank you very much! It works ... and it works with anchors too. Reading your advice I understood which was the mistake I made. I had only one ID anchor and gave the name to "#name".

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Dec 14, 2020 Dec 14, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 14, 2020 Dec 14, 2020

Copy link to clipboard

Copied

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.

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Dec 14, 2020 Dec 14, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 14, 2020 Dec 14, 2020

Copy link to clipboard

Copied

Yes, just alter the script slightly, add the code marked in red below:

 

<script>

var urlParams = new URLSearchParams(window.location.search);

 

if(urlParams.get('status') === "true") {
const collapse = document.querySelectorAll('.collapse');
collapse.forEach(function(collapse) {
collapse.classList.remove('show');
})
}

 

document.getElementById(urlParams.get('panel')).classList.add('show');
document.getElementById(urlParams.get('header')).scrollIntoView();

</script>

 

Then add the 'status' to the links as below

 

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Dec 15, 2020 Dec 15, 2020

Copy link to clipboard

Copied

LATEST

Hello Osgood_

Simply great!

Now it works as I want and as it worked on previous sites (bootstrap 3).
Thank you very much for your kind help.

PizzaPasta

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines