Scrolling to and Opening a Div Using a onclick

Question

I have this code:

<a onclick="$('a[href=\'#tab-customtab\']').trigger('click');">Enquire Now</a>

<div id="tab-customtab"></div>

This opens up the div #tab-customtab but does not scroll to it. Is there a way to scroll to the div onclick?

Possible duplicate of http://stackoverflow.com/questions/6677035/jquery-scroll-to-element — Magicprog.fr, Aug 12 '15 at 09:57

score 0 · Answer 1 · edited May 23 '17 at 12:21

0

something like this?

function scrollToId(aid){
    var aTag = $("div[id='"+ aid +"']");
    $('html,body').animate({scrollTop: aTag.offset().top},'slow');
}

source: https://stackoverflow.com/a/8579673/4356678

edited May 23 '17 at 12:21

Community

1
1

answered Aug 12 '15 at 09:59

zakius

133
1
8

Where would I put this piece of code? ``? – Adam Stevens Aug 12 '15 at 10:04
@AdamStevens it is a function, so put it wherever you declare your functions called in your code and then just call it with fitting argument in desired place, in your case inside onClick handler in your case you'd probably want to declare that handler as new function for readibility as now you put it inline – zakius Aug 12 '15 at 12:36

score 0 · Answer 2 · answered Aug 12 '15 at 12:48

Try this, it makes you more reliable and dynamic.

$(document).ready(function() {
   $(".menu").on("click",function(event) {
    
   if ($(".toggleMenu").hasClass('active')) {
   
    $(".toggleMenu").click();
   }
   $('html,body').animate({ 
   scrollTop: $(this.hash).offset().top}, 500);
   
   });
            
   $(".chosen-select").chosen();
         
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<header>
  <nav>
    <ul>
        <li> <a href="#div1" class="menu">First</a></li>
        
        <li> <a href="#div2" class="menu">Second</a></li>
        
        <li> <a href="#div3" class="menu">Third</a></li>
        
        <li> <a href="#div4" class="menu">Forth</a></li>
    </ul>
  </nav>
</header>

<section style="height:150px;width:100%;" id="div1">
    <h2 style="text-center">First Div</h2>    
</section>

<section style="height:150px;width:100%;" id="div2">
    <h2 style="text-center">Second Div</h2>
</section>

<section style="height:150px;width:100%;" id="div3">
    <h2 style="text-center">Third Div</h2>
</section>

<section style="height:150px;width:100%;" id="div4">
    <h2 style="text-center">Forth Div</h2>
</section>

Scrolling to and Opening a Div Using a onclick

2 Answers2