Button in one div makes other div scroll to anchor

Question

I'm wondering how to make a button in one div scroll to an anchor in another div. The stucture of the anchor looks like this:

<a id="organisational_change"></a>

The jQuery that I have is:

$(document).ready(function(){
var consultancyLinks=["organisational_change","organisational_development","executive_coaching","executive_team_development","corp_social_responsibility"];
$("#sidemenu_consultancy #sidemenu_consultancy_btn").each(function(){
$(this).css( 'cursor', 'pointer' );
});
    $("#sidemenu_consultancy #sidemenu_consultancy_btn").click(function(){
        $('html, body, #content_text').animate({scrollTop: $("#"+consultancyLinks[$(this).index()])},800);
        });

});

Any ideas?

http://api.jquery.com/position and http://api.jquery.com/scrollTop — Blazemonger, Dec 06 '12 at 16:43

score 0 · Answer 1 · answered Dec 06 '12 at 16:43

0

Well, you could do it without any javascript at all:

<a id="organisational_change" href="#id_of_other_element"></a>

Otherwise, if you want an animation, do something like this:

$('a').click(function(e) {
    e.preventDefault();

    $('html, body').animate({scrollTop: $($(this).attr('href')).offset().top}, 800);
});

answered Dec 06 '12 at 16:43

Christian

19,605
3
54
70

I think you want .position() instead of .offset() – Blazemonger Dec 06 '12 at 16:44
Depends which element you're scrolling, if you're scrolling the body then you want the offset relative to the document, not the element's parent. – Christian Dec 06 '12 at 16:46

score 0 · Answer 2 · answered Dec 06 '12 at 16:47

0

Try the below code

<div id="btn">
<button id="btn1"/>
</div>

<div id="ancr">
<a id="organisational_change"></a>
</div>

$(document).ready(function(){
$("#btn1").click(function(){
    $('body').animate({scrollTop:$("#organisational_change").scrollTop},800);
    });

});

answered Dec 06 '12 at 16:47

Sridhar Narasimhan

2,643
2
17
25

Thanks guys...well I ended up writing this: $("#sidemenu_consultancy #sidemenu_consultancy_btn").each(function(){ $(this).css( 'cursor', 'pointer' ); $(this).html(""+consultancyNames[$(this).index()]+""); }); The animation code doesn't seem to work: $("#sidemenu_consultancy #sidemenu_consultancy_btn").click(function(){ $('html, body, #content_text').animate({scrollTop: $("#"+consultancyLinks[$(this).index()])},800); }); The screen seems to be 'trying' to do it...it kind of shudders for a minute, but nothing. – Adam Dec 07 '12 at 17:36
Hi Adam if this helped to resolve your query mark it as answer – Sridhar Narasimhan Dec 07 '12 at 17:37

score 0 · Answer 3 · answered May 05 '19 at 20:03

Had this exact question and now I have a solution that works on mobile, tablet and desktop. But it does require javascript. Here it is, using your code. Adjust accordingly.

<div id="btn">
<button id="btn1" onclick="ScrollDiv('organisational_change')/>
</div>

<div id="ancr">
<a id="organisational_change"></a>
</div>


 <script>
   function ScrollDiv(yourelement)
     {
      var myDiv         = document.getElementById('ancr');
      var myDivrect     = myDiv.getBoundingClientRect();
      var Card          = document.getElementById(yourelement);
      var Cardrect      = Card.getBoundingClientRect();
      var CardHeight    = Cardrect.height;
      var DivTopPadding = 25;
      var DivElementPad = 10;
      var Distance   = (DivTopPadding + ((CardHeight + DivElementPad ) * (CardIndex-1)) ;
      myDiv.scrollTo({
                      top: Distance,
                      left: 0,
                      behavior: 'smooth'
                    });
     }
 </script>

Button in one div makes other div scroll to anchor

3 Answers3