内容选项卡-滚动到div内容

问题描述 投票:0回答:1

我正在使用带有NEXT和BACK按钮的内容选项卡进行导航。

这里的问题是,向下滚动到内容的底部,然后单击NEXT按钮,它会转到下一个div,但仍位于页面底部。

单击NEXT / BACK按钮时如何滚动顶部?

这里是代码

$(document).ready(function(){
  var current = 1;

    widget      = $(".step");
    btnnext     = $(".next");
    btnback     = $(".back"); 
    btnsubmit   = $(".submit");

    // Init buttons and UI
    widget.not(':eq(0)').hide();
    hideButtons(current);
    setProgress(current);

    // Next button click action
    btnnext.click(function(){
        if(current < widget.length) {           
            widget.show();          
            widget.not(':eq('+(current++)+')').hide();
            setProgress(current); 
            //alert("I was called from btnNext");
        }       
       hideButtons(current);    
   });

  // Back button click action   
  btnback.click(function(){         
      if(current > 1){
            current = current - 2;
            btnnext.trigger('click');
        }
        hideButtons(current);
    });     
});

// Change progress bar action
setProgress = function(currstep){
    var percent = parseFloat(100 / widget.length) * currstep;
    percent = percent.toFixed();
    $(".progress-bar")
        .css("width",percent+"%")
        .html(percent+"%");     
}

// Hide buttons according to the current step
hideButtons = function(current){
    var limit = parseInt(widget.length); 

    $(".action").hide();

    if(current < limit) btnnext.show();     
  if(current > 1) btnback.show();
    if(current == limit) { btnnext.hide(); btnsubmit.show(); }
}

CODEPEN

javascript html jquery css
1个回答
0
投票

我已经检查了您的代码,您需要做的就是,只需致电

 scrollTo({ top: 0, behavior: 'smooth' });

在单击按钮及其完成后,检查工作示例。

您也可以使用jQuery的animate()函数,

喜欢这样,

$("html, body").animate({ scrollTop: 0 }, 600);

$(document).ready(function(){
  var current = 1;
	
	widget      = $(".step");
	btnnext     = $(".next");
	btnback     = $(".back"); 
	btnsubmit   = $(".submit");

	// Init buttons and UI
	widget.not(':eq(0)').hide();
	hideButtons(current);
	setProgress(current);

	// Next button click action
	btnnext.click(function(){
	    if(current < widget.length) { 			
            widget.show(); 			
            widget.not(':eq('+(current++)+')').hide();
  	        setProgress(current); 
            //alert("I was called from btnNext");
        } 		
       hideButtons(current); 	
       scrollTo({ top: 0, behavior: 'smooth' });
   });
   
  // Back button click action 	
  btnback.click(function(){ 		
      if(current > 1){
		    current = current - 2;
		    btnnext.trigger('click');
	    }
        hideButtons(current);
        scrollTo({ top: 0, behavior: 'smooth' });
    });		
});

// Change progress bar action
setProgress = function(currstep){
	var percent = parseFloat(100 / widget.length) * currstep;
	percent = percent.toFixed();
	$(".progress-bar")
        .css("width",percent+"%")
        .html(percent+"%");		
}

// Hide buttons according to the current step
hideButtons = function(current){
	var limit = parseInt(widget.length); 

	$(".action").hide();

	if(current < limit) btnnext.show(); 	
  if(current > 1) btnback.show();
	if(current == limit) { btnnext.hide(); btnsubmit.show(); }
}
.container{padding-bottom:200px !important}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
	<div class="row">
        <div class="col-md-6 col-md-offset-3">
    	    <div class="progress">
                <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <div class="step well">Step 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque a elit et finibus. Mauris tincidunt hendrerit augue a blandit. In in ante malesuada, cursus orci vel, fringilla augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc a lobortis enim. Proin nec quam et arcu venenatis malesuada. Proin et augue sit amet eros egestas posuere sed ut enim. Mauris a posuere massa. Nam pretium arcu nisl, at viverra nibh dignissim in. Quisque iaculis, diam sit amet blandit interdum, elit ante facilisis mi, in vulputate enim nisi et sapien. Vivamus eget dictum odio.

Duis efficitur sollicitudin fermentum. Morbi ac tellus ipsum. Mauris auctor elementum mauris eget tristique. Nunc varius bibendum volutpat. Aliquam eu fermentum dolor. Cras ornare et ex eu scelerisque. Aliquam non quam facilisis, viverra nunc eget, hendrerit tortor. Fusce convallis arcu sed laoreet lacinia. Aenean et libero porttitor, maximus magna et, ultrices est. Pellentesque porta lectus a semper lacinia. Maecenas elementum condimentum erat id bibendum. Pellentesque iaculis auctor justo, id aliquet turpis maximus nec.

Quisque blandit lectus dui, at fermentum urna finibus non. Phasellus id magna sit amet ligula dictum suscipit id non neque. Nam vel elit a diam mattis consectetur quis ac nulla. Fusce varius efficitur quam vitae eleifend. Proin id cursus metus. Aliquam feugiat leo massa, eu ullamcorper augue tincidunt vitae. Vivamus vehicula tellus sit amet lorem tempus, eu ultrices dui laoreet.

Donec viverra consequat ante a pretium. Vestibulum non felis molestie, rutrum tellus non, tincidunt nunc. Vivamus vel nibh sit amet sapien volutpat eleifend at vel nunc. Cras lacus est, consectetur non magna in, venenatis feugiat massa. Duis congue imperdiet imperdiet. Quisque id est vestibulum, cursus turpis at, vulputate ligula. Aenean quis purus odio. Maecenas at molestie quam, sed semper ante. Aenean ac eros condimentum, sodales ex sagittis, semper mauris. Praesent metus dui, mattis non neque in, vestibulum mollis purus. Duis condimentum tortor nec massa ullamcorper commodo. Fusce efficitur dui in hendrerit vulputate. Vivamus non nulla vitae ante lobortis dignissim sit amet non orci. Donec eleifend lacus finibus auctor ultricies. Duis scelerisque eleifend tellus nec mattis. Etiam scelerisque tellus non scelerisque cursus.</div>
            <div class="step well" style="background-color: brown">Step 2
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque a elit et finibus. Mauris tincidunt hendrerit augue a blandit. In in ante malesuada, cursus orci vel, fringilla augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc a lobortis enim. Proin nec quam et arcu venenatis malesuada. Proin et augue sit amet eros egestas posuere sed ut enim. Mauris a posuere massa. Nam pretium arcu nisl, at viverra nibh dignissim in. Quisque iaculis, diam sit amet blandit interdum, elit ante facilisis mi, in vulputate enim nisi et sapien. Vivamus eget dictum odio.

Duis efficitur sollicitudin fermentum. Morbi ac tellus ipsum. Mauris auctor elementum mauris eget tristique. Nunc varius bibendum volutpat. Aliquam eu fermentum dolor. Cras ornare et ex eu scelerisque. Aliquam non quam facilisis, viverra nunc eget, hendrerit tortor. Fusce convallis arcu sed laoreet lacinia. Aenean et libero porttitor, maximus magna et, ultrices est. Pellentesque porta lectus a semper lacinia. Maecenas elementum condimentum erat id bibendum. Pellentesque iaculis auctor justo, id aliquet turpis maximus nec.

Quisque blandit lectus dui, at fermentum urna finibus non. Phasellus id magna sit amet ligula dictum suscipit id non neque. Nam vel elit a diam mattis consectetur quis ac nulla. Fusce varius efficitur quam vitae eleifend. Proin id cursus metus. Aliquam feugiat leo massa, eu ullamcorper augue tincidunt vitae. Vivamus vehicula tellus sit amet lorem tempus, eu ultrices dui laoreet.

Donec viverra consequat ante a pretium. Vestibulum non felis molestie, rutrum tellus non, tincidunt nunc. Vivamus vel nibh sit amet sapien volutpat eleifend at vel nunc. Cras lacus est, consectetur non magna in, venenatis feugiat massa. Duis congue imperdiet imperdiet. Quisque id est vestibulum, cursus turpis at, vulputate ligula. Aenean quis purus odio. Maecenas at molestie quam, sed semper ante. Aenean ac eros condimentum, sodales ex sagittis, semper mauris. Praesent metus dui, mattis non neque in, vestibulum mollis purus. Duis condimentum tortor nec massa ullamcorper commodo. Fusce efficitur dui in hendrerit vulputate. Vivamus non nulla vitae ante lobortis dignissim sit amet non orci. Donec eleifend lacus finibus auctor ultricies. Duis scelerisque eleifend tellus nec mattis. Etiam scelerisque tellus non scelerisque cursus.</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque a elit et finibus. Mauris tincidunt hendrerit augue a blandit. In in ante malesuada, cursus orci vel, fringilla augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc a lobortis enim. Proin nec quam et arcu venenatis malesuada. Proin et augue sit amet eros egestas posuere sed ut enim. Mauris a posuere massa. Nam pretium arcu nisl, at viverra nibh dignissim in. Quisque iaculis, diam sit amet blandit interdum, elit ante facilisis mi, in vulputate enim nisi et sapien. Vivamus eget dictum odio.

Duis efficitur sollicitudin fermentum. Morbi ac tellus ipsum. Mauris auctor elementum mauris eget tristique. Nunc varius bibendum volutpat. Aliquam eu fermentum dolor. Cras ornare et ex eu scelerisque. Aliquam non quam facilisis, viverra nunc eget, hendrerit tortor. Fusce convallis arcu sed laoreet lacinia. Aenean et libero porttitor, maximus magna et, ultrices est. Pellentesque porta lectus a semper lacinia. Maecenas elementum condimentum erat id bibendum. Pellentesque iaculis auctor justo, id aliquet turpis maximus nec.

Quisque blandit lectus dui, at fermentum urna finibus non. Phasellus id magna sit amet ligula dictum suscipit id non neque. Nam vel elit a diam mattis consectetur quis ac nulla. Fusce varius efficitur quam vitae eleifend. Proin id cursus metus. Aliquam feugiat leo massa, eu ullamcorper augue tincidunt vitae. Vivamus vehicula tellus sit amet lorem tempus, eu ultrices dui laoreet.

Donec viverra consequat ante a pretium. Vestibulum non felis molestie, rutrum tellus non, tincidunt nunc. Vivamus vel nibh sit amet sapien volutpat eleifend at vel nunc. Cras lacus est, consectetur non magna in, venenatis feugiat massa. Duis congue imperdiet imperdiet. Quisque id est vestibulum, cursus turpis at, vulputate ligula. Aenean quis purus odio. Maecenas at molestie quam, sed semper ante. Aenean ac eros condimentum, sodales ex sagittis, semper mauris. Praesent metus dui, mattis non neque in, vestibulum mollis purus. Duis condimentum tortor nec massa ullamcorper commodo. Fusce efficitur dui in hendrerit vulputate. Vivamus non nulla vitae ante lobortis dignissim sit amet non orci. Donec eleifend lacus finibus auctor ultricies. Duis scelerisque eleifend tellus nec mattis. Etiam scelerisque tellus non scelerisque cursus.</div>
            <div class="step well" style="background-color: green">Step 3 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque a elit et finibus. Mauris tincidunt hendrerit augue a blandit. In in ante malesuada, cursus orci vel, fringilla augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc a lobortis enim. Proin nec quam et arcu venenatis malesuada. Proin et augue sit amet eros egestas posuere sed ut enim. Mauris a posuere massa. Nam pretium arcu nisl, at viverra nibh dignissim in. Quisque iaculis, diam sit amet blandit interdum, elit ante facilisis mi, in vulputate enim nisi et sapien. Vivamus eget dictum odio.

Duis efficitur sollicitudin fermentum. Morbi ac tellus ipsum. Mauris auctor elementum mauris eget tristique. Nunc varius bibendum volutpat. Aliquam eu fermentum dolor. Cras ornare et ex eu scelerisque. Aliquam non quam facilisis, viverra nunc eget, hendrerit tortor. Fusce convallis arcu sed laoreet lacinia. Aenean et libero porttitor, maximus magna et, ultrices est. Pellentesque porta lectus a semper lacinia. Maecenas elementum condimentum erat id bibendum. Pellentesque iaculis auctor justo, id aliquet turpis maximus nec.

Quisque blandit lectus dui, at fermentum urna finibus non. Phasellus id magna sit amet ligula dictum suscipit id non neque. Nam vel elit a diam mattis consectetur quis ac nulla. Fusce varius efficitur quam vitae eleifend. Proin id cursus metus. Aliquam feugiat leo massa, eu ullamcorper augue tincidunt vitae. Vivamus vehicula tellus sit amet lorem tempus, eu ultrices dui laoreet.

Donec viverra consequat ante a pretium. Vestibulum non felis molestie, rutrum tellus non, tincidunt nunc. Vivamus vel nibh sit amet sapien volutpat eleifend at vel nunc. Cras lacus est, consectetur non magna in, venenatis feugiat massa. Duis congue imperdiet imperdiet. Quisque id est vestibulum, cursus turpis at, vulputate ligula. Aenean quis purus odio. Maecenas at molestie quam, sed semper ante. Aenean ac eros condimentum, sodales ex sagittis, semper mauris. Praesent metus dui, mattis non neque in, vestibulum mollis purus. Duis condimentum tortor nec massa ullamcorper commodo. Fusce efficitur dui in hendrerit vulputate. Vivamus non nulla vitae ante lobortis dignissim sit amet non orci. Donec eleifend lacus finibus auctor ultricies. Duis scelerisque eleifend tellus nec mattis. Etiam scelerisque tellus non scelerisque cursus.</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque a elit et finibus. Mauris tincidunt hendrerit augue a blandit. In in ante malesuada, cursus orci vel, fringilla augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc a lobortis enim. Proin nec quam et arcu venenatis malesuada. Proin et augue sit amet eros egestas posuere sed ut enim. Mauris a posuere massa. Nam pretium arcu nisl, at viverra nibh dignissim in. Quisque iaculis, diam sit amet blandit interdum, elit ante facilisis mi, in vulputate enim nisi et sapien. Vivamus eget dictum odio.

Duis efficitur sollicitudin fermentum. Morbi ac tellus ipsum. Mauris auctor elementum mauris eget tristique. Nunc varius bibendum volutpat. Aliquam eu fermentum dolor. Cras ornare et ex eu scelerisque. Aliquam non quam facilisis, viverra nunc eget, hendrerit tortor. Fusce convallis arcu sed laoreet lacinia. Aenean et libero porttitor, maximus magna et, ultrices est. Pellentesque porta lectus a semper lacinia. Maecenas elementum condimentum erat id bibendum. Pellentesque iaculis auctor justo, id aliquet turpis maximus nec.</div> 
            <button class="action back">Back</button>
            <button class="action next">Next</button>
            <button class="action submit btn btn-success">Submit</button>
        </div>
	</div>
</div>
© www.soinside.com 2019 - 2024. All rights reserved.