Modify basic JavaScript ScrollTop function

Question

I have a really basic bit of JavaScript that I'm struggling with. It lets the user click a link and the viewport then moves down to that point in the page. Here is my current tinker: https://tinker.io/8e585/16.

I would like it to work so when the user clicks the image^ under 'Test 2' it would scroll down AND open up the text within 'Test 2' at the same time?

Many thanks for any pointers with this.

^ <h3 class="head"><a href="javascript:slideonlyone('newboxes7');"><img src="/wp-content/themes/boilerplate/images/image_corner_btn_offstate.png" class="small" style="position:absolute;margin-left: 241px;margin-top: 128px;" /><img src="/wp-content/themes/boilerplate/images/sector-21.jpg"></a></h3>

Avishek · Accepted Answer · 2013-01-25 15:31:20Z

2

You can call the $(this).scrollTop() function and define scrollTop event

$(this).scrollTop(function(){
    //your code to do both tasks
)};

Hope it helps :)

Update:

function slideonlyone(thechosenone) {
     $('.newboxes2').each(function(index) {
          if (this.id == thechosenone) {
                if($(this).is('.active') )
                   $(this).removeClass('active').slideUp(600);
              else 
              $(this).addClass('active').slideDown(200);
          }
          else              
               $(this).removeClass('active').slideUp(600);

         if($(this).is('.active') )
             jQuery(this).parent('.grid_4').children().find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_onstate.png');
         else
             jQuery(this).parent('.grid_4').children().find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_offstate.png');
     });
}

$('#box1 h2').click(function () {   
    $('html, body').animate({
         scrollTop: $('#box2').offset().top}, 'slow');
    slideonlyone(thechosenone);
    return false;
});
$('#box2 h2').click(function () {   
    $('html, body').animate({
         scrollTop: $('#box1').offset().top}, 'slow');
    slideonlyone(thechosenone);
    return false;
});

edited Jan 25, 2013 at 15:31

answered Jan 25, 2013 at 14:59

Avishek

1,89615 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

michaelmcgurk Over a year ago

Ooooh - brill! I'll give it a wee tinker just now. Back in 2 :)

michaelmcgurk Over a year ago

OK, I've given that a go, but it doesn't seem to be playing ball. Here's me Tinker :-) tinker.io/8e585/17 Thanks for any pointers.

Avishek Over a year ago

you got a little bit problem with the syntax. Try the updated code in your tinker.

michaelmcgurk Over a year ago

Thanks for this, I've updated again: tinker.io/8e585/18 but it still doesn't seem to be working :-/

Avishek Over a year ago

se the updated code. its a bit static, but you can get the idea. and don't need to manipulate the scroll event for this

michaelmcgurk · Accepted Answer · 2013-01-26 06:12:47Z

0

ANSWER: https://tinker.io/8e585/19 :-D

I basically used $("#box2 h3 a").click(function () {.

answered Jan 26, 2013 at 6:12

michaelmcgurk

6,54525 gold badges102 silver badges197 bronze badges

Collectives™ on Stack Overflow

Modify basic JavaScript ScrollTop function

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related