Java script scroll button

JavaScript
1

hi there i cannot find the problem i have two buttons and a code when its clicks the form opens and scrolls to that form but when i added the same code to another button in the same page they behave different like on button on right scrolls and goes back and button left scrolls perfectly as required also if i add one code only for button for right it will perform as required but i want both the buttons to scroll without goin back to top please help

script type="text/javascript">
$(document).ready(function() {
    $("#move").click(function(){
   $("#message").toggle();
});
$("button").click(function() {
    $('html,body').animate({
        scrollTop: $("#message").offset().top},'slow');
});
$("#move2").click(function(){
   $("#message2").toggle();
   });
   $("button").click(function() {
    $('html,body').animate({
        scrollTop: $("#message2").offset().top},
        'slow');
});
 });
</script>
2

Hi Mazhar_Shaikh

You have used same code ($(“button”).click(function() {) for both buttons click and it will conflict. So you need to assign different different ids for both buttons like assign id=“button1” fro first button and id=“button2” for second button.
After that modify you JavaScript code as given below, hop it will resolved you problem.

script type=“text/javascript”>
$(document).ready(function() {
$(“#move”).click(function(){
$(“#message”).toggle();
});
$(“#button1”).click(function() {
$(‘html,body’).animate({
scrollTop: $(“#message”).offset().top},‘slow’);
});
$(“#move2”).click(function(){
$(“#message2”).toggle();
});
$(“#button2”).click(function() {
$(‘html,body’).animate({
scrollTop: $(“#message2”).offset().top},
‘slow’);
});
});

3

thanks man it worked :slight_smile: also i have another issue regarding the pop up page i want to close the pop up if clicked YES button but i dont knw how to do that temp i added copy page to redirect using href but i want to get close when clicked yes also i want the backgorund unclickable below is the code

<!DOCTYPE html>

    <html>
	<head>
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="images/mobile-logo.png" rel="icon" type="image/x-icon" />
		<link href='https://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet' type='text/css'>
		<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
		<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/mystyle.css">
	<script>
$(document).ready(function() {
var id = '#dialog';
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(500);
$('#mask').fadeTo("slow",0.9); 
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top',  winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);  
//if mask is clicked
$('#mask').click(function() {
$(this).hide();
$('.window').hide();
});
});
	</script>
	
	</head>
	<body><br><br><br>
	<div class="row">
	<div id="fix">
	<div class="col-md-12 col-sm-12 col-xs-12">
	<div id="boxes">
  <div id="dialog" class="window">
  <img src="images/popup.jpg" class="img-responsive" width="100%" height="auto"></img><br>
  <div class="col-md-12 col-sm-12 col-xs-12">
  <button type="button" class="btn btn-danger" id="butt"><a href="registers.php">YES</a></button>
  <button type="button" class="btn btn-danger" id="butt"><a href="index.php">NO</a></button>
  </div>                       
  </div>
  <div id="mask"></div>
</div>
</div>
</div>
</div>
	</body>
	</html>

css code

/*POP UP CONTENT*/
@media only screen and (min-width: 720px) {
#mask {
  position: fixed;
  margin-left: auto;
  margin-right:auto;
  top: 0;
	z-index:999;
  background-color: #000;
 width: 100%;
  height:100%;
  display: none;
	
}
#boxes .window {
  position: fixed;
  left: 0;
  top: 0;
  width: 440px;
  height: 200px;
  display: block;
  z-index: 9999;
  padding: 20px;
 
  text-align: center;
}
#boxes #dialog {
  width: 730px;
  height: 290px;
  padding: 0px;
  background-color: #ffffff;
  font-family: 'Segoe UI Light', sans-serif;
  font-size: 15pt;
  
}

#but
{
	position:relative;
	top:2%;
	bottom:30%;
}
}
4

Hii

Please see below code, it will help you to solve your problem, if still you have problem, please send whole code…

test.html (4.0 KB)

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.