javascript - 修改基本的 JavaScript ScrollTop 函数

Question

我有一些非常基本的 JavaScript 知识，但我正在努力学习。它允许用户单击链接，然后视口(viewport)向下移动到页面中的该点。这是我当前的修补程序:https://tinker.io/8e585/16 .

我希望它能够正常工作，以便当用户单击“测试 2”下的图像^时，它会向下滚动并打开同时显示“测试 2”中的文本？

非常感谢您对此的任何指示。

 

^ <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>

Answer 1

您可以调用$(this).scrollTop()函数并定义scrollTop事件

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

希望有帮助:)

更新:

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