自动向上滚动页面JavaScript滑块(我自己创建）

Automatically scrolls page up javascript slider (myself created)

本文关键字：滑块 我自己 创建 JavaScript 滚动      更新时间：2023-09-26

所以我创建了javascript滑块，当页面进入下一个选项卡时，它会自动向上拉页面。您可以在页面中对其进行测试，您将看到如何解决此问题？它拉起页面，就像会有 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（）不起作用？它仍然继续滚动。如何让它停止？

你需要传递一个"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);
});
相关文章：