Question

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

我希望它可以工作，所以当用户点击“测试2 ”下的图片时，它会向下滚动 AND 打开同时在“测试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;
});

Answer 2

答案：https://tinker.io/8e585/19 :-D

我基本上使用了$("#box2 h3 a").click(function () {。

修改基本的JavaScript ScrollTop函数

2 个答案: