CODEWITHSUNDEEP
javascriptjqueryhtmlscrolltop
michaelmcgurk
michaelmcgurk

Reputation: 6509

Modify basic JavaScript ScrollTop function

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>

Upvotes: 0

Views: 397

Answers (2)

michaelmcgurk
michaelmcgurk

Reputation: 6509

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

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

Upvotes: 0

Avishek
Avishek

Reputation: 1896

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;
});

Upvotes: 2

Related Questions