2016-04-04 5 views
-2

У меня есть эта часть кодаJavaScript не прокручивается на второй клик

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script> 
<script> 
    $(document).ready(function() { 
     $("#Button1").click(function() { 
      $('html, body').animate({ 
       scrollTop: $("#Div1").offset().top 
      }, 2000); 
     }); 
     $("#Button2").click(function() { 
      $('html, body').animate({ 
       scrollTop: $("#Div2").offset().top 
      }, 2000); 
     }); 
     $("#Button3").click(function() { 
      $('html, body').animate({ 
       scrollTop: $("#Div3").offset().top 
      }, 2000); 
     }); 
    }); 
</script> 

Когда я получаю на страницу, и нажмите одну из кнопок работает отлично, но когда мне нужно нажать снова надеть» т работы.

Любая идея?

+0

неродственных к вашему вопросу, но вы могли бы легко упростить этот код так, что у вас есть контроль слушателя один событие все прокрутки вместо с отдельной кнопкой для каждой кнопки. – APAD1

+0

Как выглядит html? – epascarello

ответ

0

Это должно иметь какое-то отношение к вашему HTML. Я помещаю ваш код в фрагмент ниже, и он работает.

$(document).ready(function() { 
 
     $("#Button1").click(function() { 
 
      $('html, body').animate({ 
 
       scrollTop: $("#Div1").offset().top 
 
      }, 2000); 
 
     }); 
 
     $("#Button2").click(function() { 
 
      $('html, body').animate({ 
 
       scrollTop: $("#Div2").offset().top 
 
      }, 2000); 
 
     }); 
 
     $("#Button3").click(function() { 
 
      $('html, body').animate({ 
 
       scrollTop: $("#Div3").offset().top 
 
      }, 2000); 
 
     }); 
 
    });
.space { 
 
    height: 100px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button id="Button1">Button1</button> 
 
<button id="Button2">Button2</button> 
 
<button id="Button3">Button3</button> 
 

 

 
<div class="space"></div> 
 
<div id="Div1">Div1</div> 
 
<div class="space"></div> 
 
<div id="Div2">Div2</div> 
 
<div class="space"></div> 
 
<div id="Div3">Div3</div> 
 
<div class="space"></div> 
 
<div class="space"></div> 
 
<div class="space"></div>

-2

Он выглядит хорошо с моей стороны, я создал этот jsfiddle для вас.

Я считаю, что кнопка не работает, потому что вы, возможно, уже находитесь там же, куда хотите прокрутить.

jsfiddle

Код сниппета

$(document).ready(function() { 
 
    $("#Button1").click(function() { 
 
    $('html, body').animate({ 
 
     scrollTop: $("#Div1").offset().top 
 
    }, 2000); 
 
    }); 
 
    $("#Button2").click(function() { 
 
    $('html, body').animate({ 
 
     scrollTop: $("#Div2").offset().top 
 
    }, 2000); 
 
    }); 
 
    $("#Button3").click(function() { 
 
    $('html, body').animate({ 
 
     scrollTop: $("#Div3").offset().top 
 
    }, 2000); 
 
    }); 
 
});
.container { 
 
    height: 1000px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    
 
    
 
<div id="Div1">1</div> 
 
<div id="Div2">2</div> 
 
<div id="Div3">3</div> 
 

 
<div class="container"> 
 
</div> 
 
<div id="Button1">click1</div> 
 
<div id="Button2">click2</div> 
 
<div id="Button3">click3</div> 
 
    
 
    
 
</body>

+0

Пока не работает – user3494214

Смежные вопросы