我有一个问题，我只是制作了一段代码，首先点击一个元素就显示图像，然后在第二次点击时隐藏它们。我的问题是当第二次点击后图像被完全隐藏（宽度= 0px）时，页面立即滚动数百个像素，就像一个锚点。 我只是处理隐藏图像的左侧位置和宽度。
有人有同样的问题吗？
编辑：
我再次测试了它，我还有更多细节：这个问题只影响第一和第三组图像（这些blocs动画是第二和第四组的反向动画），当第二次点击时追加，当第一张图像（green_rect_arr _ * .png）开始隐藏自己时会出现一个小滚动，当第二张图像（green_link.png）开始隐藏自己时会出现第二个大卷轴。
我的HTML / CSS：
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/green_circle_rse.png" class="pos_absolute green_circle_rse_waw_hs" />
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/green_link.png" class="pos_absolute green_link_rse_waw_hs" />
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/green_rect_arr_rse.png" class="pos_absolute green_rect_arr_rse_waw_hs" />
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/green_circle_hbp.png" class="pos_absolute green_circle_hbp_waw_hs" />
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/green_link.png" class="pos_absolute green_link_hbp_waw_hs" />
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/green_rect_arr_hbp.png" class="pos_absolute green_rect_arr_hbp_waw_hs" />
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/green_circle_inno.png" class="pos_absolute green_circle_inno_waw_hs" />
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/green_link.png" class="pos_absolute green_link_inno_waw_hs" />
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/green_rect_arr_inno.png" class="pos_absolute green_rect_arr_inno_waw_hs" />
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/green_circle_secu.png" class="pos_absolute green_circle_secu_waw_hs" />
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/green_link.png" class="pos_absolute green_link_secu_waw_hs" />
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/green_rect_arr_secu.png" class="pos_absolute green_rect_arr_secu_waw_hs" />
<style>
.green_circle_rse_waw_hs {
top: 5vw;
left: 60vw;
width: 25vw;
}
.green_circle_hbp_waw_hs {
top: 40vw;
left: 15vw;
width: 25vw;
}
.green_circle_inno_waw_hs {
top: 75vw;
left: 60vw;
width: 25vw;
}
.green_circle_secu_waw_hs {
top: 110vw;
left: 15vw;
width: 25vw;
}
.green_rect_arr_rse_waw_hs {
top: 0vw;
left: 15vw;
height: 34.999vw;
width: 25vw;
}
.green_rect_arr_hbp_waw_hs {
top: 35vw;
left: 60vw;
height: 34.999vw;
width: 25vw;
}
.green_rect_arr_inno_waw_hs {
top: 70vw;
left: 15vw;
height: 34.999vw;
width: 25vw;
}
.green_rect_arr_secu_waw_hs {
top: 115vw;
left: 60vw;
height: 17.499vw;
width: 25vw;
}
.green_link_rse_waw_hs {
top: 15vw;
left: 40vw;
height: 5.5vw;
width: 20.8vw;
}
.green_link_hbp_waw_hs {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
top: 50vw;
left: 39.1vw;
height: 5.5vw;
width: 21vw;
}
.green_link_inno_waw_hs {
top: 85vw;
left: 40vw;
height: 5.5vw;
width: 20.8vw;
}
.green_link_secu_waw_hs {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
top: 120vw;
left: 39.1vw;
height: 5.5vw;
width: 21vw;
}
</style>
我的JS（和Jquery一起）：
$(function() {
var end_one = true;
var end_two = true;
var end_three = true;
var end_four = true;
var first_rec = $(".green_rect_arr_rse_waw_hs");
var second_rec = $(".green_rect_arr_hbp_waw_hs");
var third_rec = $(".green_rect_arr_inno_waw_hs");
var fourth_rec = $(".green_rect_arr_secu_waw_hs");
var first_link = $(".green_link_rse_waw_hs");
var second_link = $(".green_link_hbp_waw_hs");
var third_link = $(".green_link_inno_waw_hs");
var fourth_link = $(".green_link_secu_waw_hs");
var base_width_first_rec = first_rec.width();
var str_base_width_first_rec = (base_width_first_rec).toString();
var left_first_rec = first_rec.position().left;
var str_left_first_rec = (left_first_rec).toString();
var width_left_first_rec = (toVw(left_first_rec + base_width_first_rec)).toString() + "vw";
var base_width_second_rec = second_rec.width();
var str_base_width_second_rec = (base_width_second_rec).toString();
var base_width_third_rec = third_rec.width();
var str_base_width_third_rec = (base_width_third_rec).toString();
var left_third_rec = third_rec.position().left;
var str_left_third_rec = (left_third_rec).toString();
var width_left_third_rec = (toVw(left_third_rec + base_width_third_rec)).toString() + "vw";
var base_width_fourth_rec = fourth_rec.width();
var str_base_width_fourth_rec = (base_width_fourth_rec).toString();
first_rec.css({width: "0px", left: width_left_first_rec});
second_rec.css({width: "0px"});
third_rec.css({width: "0px", left: width_left_third_rec});
fourth_rec.css({width: "0px"});
var base_width_first_link = first_link.width();
var str_base_width_first_link = (base_width_first_link).toString();
var left_first_link = first_link.position().left;
var str_left_first_link = (left_first_link).toString();
var width_left_first_link = (toVw(left_first_link + base_width_first_link)).toString() + "vw";
var base_width_second_link = (second_link.width()).toString();
var base_width_third_link = third_link.width();
var str_base_width_third_link = (base_width_third_link).toString();
var left_third_link = third_link.position().left;
var str_left_third_link = (left_third_link).toString();
var width_left_third_link = (toVw(left_third_link + base_width_third_link)).toString() + "vw";
var base_width_fourth_link = (fourth_link.width()).toString();
first_link.css({width: "0px", left: width_left_first_link});
second_link.css({width: "0px"});
third_link.css({width: "0px", left: width_left_third_link});
fourth_link.css({width: "0px"});
$(".green_circle_rse_waw_hs").click(function() {
if(first_rec.width() < base_width_first_rec && end_one) {
end_one = false;
first_link.animate({width: str_base_width_first_link, left: str_left_first_link}, 1000, function() {
first_rec.animate({width: str_base_width_first_rec, left: str_left_first_rec}, 1000, function() {
end_one = true;
});
});
}
else if(end_one) {
end_one = false;
first_rec.animate({width: "0px", left: width_left_first_rec}, 1000, function() {
first_link.animate({width: "0px", left: width_left_first_link}, 1000, function() {
end_one = true;
});
});
}
});
$(".green_circle_hbp_waw_hs").click(function() {
if(second_rec.width() < base_width_second_rec && end_two) {
end_two = false;
second_link.animate({width: base_width_second_link}, 1000, function() {
second_rec.animate({width: str_base_width_second_rec}, 1000, function() {
end_two = true;
});
});
}
else if(end_two) {
end_two = false;
second_rec.animate({width: "0px"}, 1000, function() {
second_link.animate({width: "0px"}, 1000, function() {
end_two = true;
});
});
}
});
$(".green_circle_inno_waw_hs").click(function() {
if(third_rec.width() < base_width_third_rec && end_three) {
end_three = false;
third_link.animate({width: str_base_width_third_link, left: str_left_third_link}, 1000, function() {
third_rec.animate({width: str_base_width_third_rec, left: str_left_third_rec}, 1000, function() {
end_three = true;
});
});
}
else if(end_three) {
end_three = false;
third_rec.animate({width: "0px", left: width_left_third_rec}, 1000, function() {
third_link.animate({width: "0px", left: width_left_third_link}, 1000, function() {
end_three = true;
});
});
}
});
$(".green_circle_secu_waw_hs").click(function() {
if(fourth_rec.width() < base_width_fourth_rec && end_four) {
end_four = false;
fourth_link.animate({width: base_width_fourth_link}, 1000, function() {
fourth_rec.animate({width: str_base_width_fourth_rec}, 1000, function() {
end_four = true;
});
});
}
else if(end_four) {
end_four = false;
fourth_rec.animate({width: "0px"}, 1000, function() {
fourth_link.animate({width: "0px"}, 1000, function() {
end_four = true;
});
});
}
});
function toVw(posPx) {
var height = $(window).width();
return (posPx * 100) / height;
}
)};
感谢您的帮助！