<ul class="slides">
 <div class="page-header" id="page-header">
 
 <!--Begin slide 1 -->
 
    <input type="radio" name="radio-btn" id="img-1" checked />

    <li class="slide-container">

		<div class="slide">
			<video id="video1" width="100%" autoplay loop muted >
			<source src="files/video/1.webm" type="video/webm">			  
		  </video>
        </div>

		<div class="nav">
		
			<label for="img-10" class="prev" onclick="setTimeout(jump, 6000);"></label>
			<label for="img-2"  class="next" onclick="setTimeout(jump2, 6000);" ></label>

		</div>

    </li>
<!-- End slide 1 -->
	
	
 <!--Begin slide 2 -->	
    <input type="radio" name="radio-btn" id="img-2" />
    <li class="slide-container">
<div class="video-container">

        <div class="slide">
		<video id="video2" width="100%"   muted >
          <source src="files/video/2.webm" type="video/webm">	
		  </video>
		  </div>
		  </div>

		<div class="nav">
			<label for="img-1" class="prev"  onclick="setTimeout(jump3, 6000);"></label>
			<label for="img-3" class="next"  onclick="setTimeout(jump4, 6000);"></label>

		</div>		
    </li>
 <!--End slide 2 -->
 
 <!--Begin slide 3 -->
    <input type="radio" name="radio-btn" id="img-3" />

    <li class="slide-container">
<div class="video-container">
        <div class="slide">
		
		<video id="video3" width="100%" >
          <source src="files/video/3.webm" type="video/webm">	
		  </video>
		  </div>
        </div>
		<div class="nav">
			<label for="img-2" class="prev" onclick="setTimeout(jump5, 6000);"></label>
			<label for="img-4" class="next" onclick="setTimeout(jump6, 6000);"></label>
		</div>
    </li>
 <!--End slide 3 -->

</div>
</ul>

<ul class="slides">
 <div class="page-header" id="page-header">
 
 <!--Begin slide 1 -->
 
    <input type="radio" name="radio-btn" id="img-1" checked />

    <li class="slide-container">

		<div class="slide">
			<video id="video1" width="100%" autoplay loop muted >
			<source src="files/video/1.webm" type="video/webm">			  
		  </video>
        </div>

		<div class="nav">
		
			<label for="img-10" class="prev" onclick="setTimeout(jump, 6000);"></label>
			<label for="img-2"  class="next" onclick="setTimeout(jump2, 6000);" ></label>

		</div>

    </li>
<!-- End slide 1 -->
	
	
 <!--Begin slide 2 -->	
    <input type="radio" name="radio-btn" id="img-2" />
    <li class="slide-container">
<div class="video-container">

        <div class="slide">
		<video id="video2" width="100%"   muted >
          <source src="files/video/2.webm" type="video/webm">	
		  </video>
		  </div>
		  </div>

		<div class="nav">
			<label for="img-1" class="prev"  onclick="setTimeout(jump3, 6000);"></label>
			<label for="img-3" class="next"  onclick="setTimeout(jump4, 6000);"></label>

		</div>		
    </li>
 <!--End slide 2 -->
 
 <!--Begin slide 3 -->
    <input type="radio" name="radio-btn" id="img-3" />

    <li class="slide-container">
<div class="video-container">
        <div class="slide">
		
		<video id="video3" width="100%" >
          <source src="files/video/3.webm" type="video/webm">	
		  </video>
		  </div>
        </div>
		<div class="nav">
			<label for="img-2" class="prev" onclick="setTimeout(jump5, 6000);"></label>
			<label for="img-4" class="next" onclick="setTimeout(jump6, 6000);"></label>
		</div>
    </li>
 <!--End slide 3 -->

</div>
</ul>

I'm using an image gallery HTML code that gives each image slide an id. I'd like to make a javascript function to jump to a specific slide when a button is clicked on a slide. I know that window.location.href is used to redirect to different pages, but is there a way to redirect to an id of something that is on the page?

• javascript

Share Improve this question Follow edited Sep 1, 2017 at 22:16 user2454060 asked Aug 31, 2017 at 20:26 user2454060user2454060 9111 gold badge11 silver badge1111 bronze badges 3

• This might be something worth looking into developer.mozilla/en-US/docs/Web/API/Element/scrollIntoView – Steven Goodman Commented Aug 31, 2017 at 20:29
• Possible duplicate of How do I scroll to an element using JavaScript? – Steven Goodman Commented Aug 31, 2017 at 20:30
• Try using <button onclick="#IdOfElementYouWantToRedirectTo"></button> or <a href="#IdOfElementYouWantToRedirectTo"></a> – Jeff P. Commented Aug 31, 2017 at 20:32

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

You can add a hash before the id of an element in your page to redirect to it:

<a href="#foo"></a>

This also works in Javascript:

window.location.href = '#foo'

Other posters noting that this is a possible duplicate is correct, but to make the answer more specific you'll want to use anchor tags within a page.

Background reading on anchor tags within a page: http://www.echoecho./htmllinks08.htm http://help.typepad./anchor-tags.html

So in your case specifically your image markup will look something like

<a name="#img-1"></a>
<img src="..."/>

Then use window.location.href to navigate.

window.location.href = '#img-1';

Per your response you seem to have label tags that will kick off this interaction and you may be able to handle this with an onClick handler:

<label for="img-1" class="prev" onclick="window.location.href='#img-1'"></label>

If it's not the label tag but actually the radio button you mentioned that causes the navigation, you will need to write a slightly more plex function that evaluates if the button is checked or not -- examples using jquery can be found here and in your case you'd just modify the alert call to be the window.location.href navigation: jquery radio button when checked need an alert

Just use the location.hash property to set the anchor part of the URL.

Let's asume the URL is 'www.abc.'

location.hash = "anId";

... will set the URL to 'www.abc.#anId'

If there is an id "anId" on the page the browser will automatically jump to it.