Comment puis-je empêcher la page du navigateur de défiler jusqu'à la position la plus haute dans le navigateur après avoir cliqué sur mon bouton de curseur? J'avais supposé que le problème était avec le javascript étant donné que le défilement vers le haut indésirable et forcé se produit après le déclenchement de l'événement de clic de bouton, mais je ne suis pas complètement sûr. J'ai publié mon code et mon balisage afin que cette erreur puisse être reproduite et pour simplifier le débogage, j'ai combiné le html, le css et le javascript dans un seul fichier. Toute idée serait grandement apprécié.

<!DOCTYPE html>
  <html>
  <head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
  jQuery(document).ready(function ($) {

  $('#checkbox').change(function(){
    setInterval(function () {
    moveRight();
   }, 3000);
 });

var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;

$('#slider').css({ width: slideWidth, height: slideHeight });

$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

$('#slider ul li:last-child').prependTo('#slider ul');

function moveLeft() {
    $('#slider ul').animate({
        left: + slideWidth
    }, 200, function () {
        $('#slider ul li:last-child').prependTo('#slider ul');
        $('#slider ul').css('left', '');
    });
};

function moveRight() {
    $('#slider ul').animate({
        left: - slideWidth
    }, 200, function () {
        $('#slider ul li:first-child').appendTo('#slider ul');
        $('#slider ul').css('left', '');
    });
};

$('a.control_prev').click(function () {
    moveLeft();
});

$('a.control_next').click(function () {
    moveRight();
});

});  

</script>
<style>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);  

nav { 
float: left;
background-color: #EEEFFF;
height: 1500px;
width: 100px;
}

html {
border-top: 5px solid #fff;
background: #58DDAF;
color: #2a2a2a;
}

html, body {
margin: 0;
padding: 0;
font-family: 'Open Sans';
}

h1 {
color: #fff;
text-align: center;
font-weight: 300;
}

#slider {
position: relative;
overflow: hidden;
margin: 20px auto 0 auto;
border-radius: 4px;
}

#slider ul {
position: relative;
margin: 0;
padding: 0;
height: 200px;
list-style: none;
}

#slider ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 500px;
height: 300px;
background: #ccc;
text-align: center;
line-height: 300px;
}

a.control_prev, a.control_next {
position: absolute;
top: 40%;
z-index: 999;
display: block;
padding: 4% 3%;
width: auto;
height: auto;
background: #2a2a2a;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 18px;
opacity: 0.8;
cursor: pointer;
}

a.control_prev:hover, a.control_next:hover {
opacity: 1;
-webkit-transition: all 0.2s ease;
}

a.control_prev {
border-radius: 0 2px 2px 0;
}

a.control_next {
right: 0;
border-radius: 2px 0 0 2px;
}

.slider_option {
position: relative;
margin: 10px auto;
width: 160px;
font-size: 18px;
}

</style>
</head>

<body>
<nav>
test
</nav>
<div id="slider">
  <a href="#" class="control_next"></a>
  <a href="#" class="control_prev"></a>
    <ul>
     <li>SLIDE 1</li>
     <li style="background: #aaa;">SLIDE 2</li>
     <li>SLIDE 3</li>
     <li style="background: #aaa;">SLIDE 4</li>
    </ul>  
</div>
</body>
</html>    
3
Digital Impermanence 23 juil. 2015 à 02:38

3 réponses

Meilleure réponse

Étant donné que vos <a> balises ont l'attribut href="#", le comportement par défaut du navigateur consiste à naviguer vers l'URL http://yoursite.com/your/page#. Cela a pour effet de faire défiler le navigateur vers le haut de la page (car il recherche quelque chose avec un id vide, n'en trouve pas, alors faites simplement défiler vers le haut de la page).

Vous pouvez empêcher ce comportement de navigateur par défaut en utilisant l'une des deux techniques de votre fonction de gestionnaire de clics Javascript:

  1. return false; à partir de la fonction de gestionnaire; ou
  2. Appelez la méthode .preventDefault() sur l'argument event que votre fonction obtient comme premier argument.
2
GregL 22 juil. 2015 à 23:43

Je pense que c'est parce que vous avez un href = "#", j'ai donc changé les balises a en balises de bouton, et les changer en jquery, et dans le CSS, j'ai ajouté: border: solid transparent ;, pour le faire ressembler à quand c'était avec des tags, voici le code final:

<!DOCTYPE html>
  <html>
  <head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
  jQuery(document).ready(function ($) {

  $('#checkbox').change(function(){
    setInterval(function () {
    moveRight();
   }, 3000);
 });

var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;

$('#slider').css({ width: slideWidth, height: slideHeight });

$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

$('#slider ul li:last-child').prependTo('#slider ul');

function moveLeft() {
    $('#slider ul').animate({
        left: + slideWidth
    }, 200, function () {
        $('#slider ul li:last-child').prependTo('#slider ul');
        $('#slider ul').css('left', '');
    });
};

function moveRight() {
    $('#slider ul').animate({
        left: - slideWidth
    }, 200, function () {
        $('#slider ul li:first-child').appendTo('#slider ul');
        $('#slider ul').css('left', '');
    });
};

$('button.control_prev').click(function () {
    moveLeft();
});

$('button.control_next').click(function () {
    moveRight();
});

});  

</script>
<style>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);  

nav { 
float: left;
background-color: #EEEFFF;
height: 1500px;
width: 100px;
}

html {
border-top: 5px solid #fff;
background: #58DDAF;
color: #2a2a2a;
}

html, body {
margin: 0;
padding: 0;
font-family: 'Open Sans';
}

h1 {
color: #fff;
text-align: center;
font-weight: 300;
}

#slider {
position: relative;
overflow: hidden;
margin: 20px auto 0 auto;
border-radius: 4px;
}

#slider ul {
position: relative;
margin: 0;
padding: 0;
height: 200px;
list-style: none;
}

#slider ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 500px;
height: 300px;
background: #ccc;
text-align: center;
line-height: 300px;
}

button.control_prev, button.control_next {
position: absolute;
top: 40%;
z-index: 999;
display: block;
padding: 4% 3%;
width: auto;
height: auto;
background: #2a2a2a;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 18px;
opacity: 0.8;
cursor: pointer;
border:solid transparent;
}

button.control_prev:hover, button.control_next:hover {
opacity: 1;
-webkit-transition: all 0.2s ease;
}

button.control_prev {
border-radius: 0 2px 2px 0;
}

button.control_next {
right: 0;
border-radius: 2px 0 0 2px;
}

.slider_option {
position: relative;
margin: 10px auto;
width: 160px;
font-size: 18px;
}

</style>
</head>

<body>
<nav>
test
</nav>
<div id="slider">
  <button class="control_next"></button>
  <button class="control_prev"></button>
    <ul>
     <li>SLIDE 1</li>
     <li style="background: #aaa;">SLIDE 2</li>
     <li>SLIDE 3</li>
     <li style="background: #aaa;">SLIDE 4</li>
    </ul>  
</div>
</body>
</html>   
0
ayadi baha 22 juil. 2015 à 23:49

Annuler le clic du lien

$('a.control_prev').click(function (e) {
    moveLeft();
    e.preventDefault();
});

(faites-le pour l'autre aussi)

1
epascarello 22 juil. 2015 à 23:40