자동으로 페이지 위로 스크롤 자바 스크립트 슬라이더 (자신이 만든)

Question

그래서 나는 다음 탭으로 이동할 때 자동으로 페이지를 끌어 오는 자바 스크립트 슬라이더를 만들었습니다. 당신은 귀하의 페이지에서 그것을 테스트 할 수 있으며, 그것을 볼 수있는 방법을 수정? 그것은 href = "# top"이 될 것처럼 페이지를 끌어 올립니다. 그러나 그런 것은 없습니다.

코드 -

또한

<script type="text/javascript"> 
     jQuery(document).ready(function() { 
      var time = <?php echo $data['tab1_speed']; ?>;   
      var tripleboxTitle = jQuery("triplebox-tab-title"); 
      setInterval(function() { 
       tripleboxTitle.click(function(){ 
        clearInterval(); 
       }); 
       var currentTab = jQuery('.triplebox-tab-active').attr("tab"); 
       var newTab = Number(currentTab)+1; 
       if(newTab > 3) { 
        newTab = 1; 
       } 
       console.log(newTab); 
       jQuery(".triplebox-tab-title").removeClass('triplebox-tab-active'); 
       jQuery('#triplebox-widget-tab'+newTab).addClass('triplebox-tab-active'); 
       jQuery(".triplebox-tab-default").hide(); 
       jQuery(".triplebox-tab-default").removeClass('triplebox-tab-default'); 
       jQuery("#triplebox-widget-tab"+newTab+"-widget").addClass('triplebox-tab-default').fadeIn(300); 
      }, time); 
     }); 
    </script> 
    <a id="triplebox-widget-tab1" tab="1" class="triplebox-tab-title triplebox-tab-active" <?php if($data['use_color'] == 'default') { ?>style="color: <?php echo $data['color_text']; ?>; background: <?php echo $data['color_tabs']; ?>;" <?php } ?>><?php echo $data['tab1_name']; ?></a> 
    <a id="triplebox-widget-tab2" tab="2" class="triplebox-tab-title" <?php if($data['use_color'] == 'default') { ?>style="color: <?php echo $data['color_text']; ?>; background: <?php echo $data['color_tabs']; ?>;" <?php } ?>><?php echo $data['tab2_name']; ?></a> 
    <a id="triplebox-widget-tab3" tab="3" class="triplebox-tab-title" <?php if($data['use_color'] == 'default') { ?>style="color: <?php echo $data['color_text']; ?>; background: <?php echo $data['color_tabs']; ?>;" <?php } ?>><?php echo $data['tab3_name']; ?></a> 

    <div id="triplebox-widget-tab1-widget" class="triplebox-widget triplebox-tab-default" <?php if($data['use_color'] == 'default') { ?>style="background: <?php echo $data['color_content']; ?>; color: <?php echo $data['color_text']; ?>;"<?php } ?>> 
     <?php echo $content; ?> 
    </div> 
    <div id="triplebox-widget-tab2-widget" class="triplebox-widget" style=" <?php if($data['use_color'] == 'default') { ?>background: <?php echo $data['color_content']; ?>; color: <?php echo $data['color_text']; ?>;<?php } ?> display: none;"> 
     <?php echo $content2; ?> 
    </div> 
    <div id="triplebox-widget-tab3-widget" class="triplebox-widget" style=" <?php if($data['use_color'] == 'default') { ?>background: <?php echo $data['color_content']; ?>; color: <?php echo $data['color_text']; ?>;<?php } ?> display: none;"> 
     <?php echo $content3; ?> 
    </div> 

, 왜 내 됨 clearInterval()이다; 작동 안함? 여전히 스크롤을 계속합니다. 그것을 멈추게 만드는 방법?

Answer 1

당신은 "intervalID"

https://developer.mozilla.org/en/DOM/window.setInterval#Example

그래서를 함수에 전달할 필요가;

var tripleboxTitle = jQuery("triplebox-tab-title"); 
var myIntvID = setInterval(function() { 
... 
tripleboxTitle.click(function(){ 
    clearInterval(myIntvID); 
});