Question

I am facing a problem with the java-script code…

html:

<div id="thumbs">
  <a href="link1.htm"><img src="images/Button_Watch.png"></a>
</div>

Javascript:

// This function runs when the page loads and adds click events to the links

function init() {
  var links = document.getElementById('thumbs').getElementsByTagName('a');
  // ...
}

// Call our init function when the page loads

window.onload = init;

The code will take the link “link1.htm” on clicking a button image link under div id “thumb” to show dynamic content from outside the server without reloading the page. The content show in (<div id="embed"></div>). I want the same “Button_Watch.png” when click to scroll to the anchor #top to point to the part where the content changes dynamically(ie; in <div id="embed"> position )

I think you got what I meant to convey, please help me

Answer 1

Here’s a quick and simple solution.

Javascript:

function scrollToAnchor (anchor_name) {
  document.getElementsByName(anchor_name)[0].scrollIntoView(true);
}

HTML:

<a name="top"></a>

<!-- other content -->

<a href="link1.htm" onclick="scrollToAnchor('top');">
  <img src="images/Button_Watch.png">
</a>