web-dev-qa-db-fra.com

Défilement avec ancre sans # dans l'URL

Je dois faire défiler une page à l'aide de anchor tag. 

En ce moment je fais:

<a href="#div1">Link1</a>

<div id='div1'>link1 points me!!</div>

Cela fonctionne bien lorsque j'ai cliqué sur Link1, la page défile vers le div avec l'id "div1".
Le fait est que je ne veux pas changer d'URL qui prend le suffixe #div une fois que j'ai cliqué sur Link1.

J'ai essayé avec ancre href comme

void(0);

et

location.hash='#div1';
return false;

e.preventdefault;

Comment éviter de changer l'URL?

javascripthtmlhash
22
mayank

Prenez cette réponse de Jeff Hines en utilisant l'animation de jQuery:

function goToByScroll(id){
    $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}

Si vous utilisez jQuery, n'oubliez pas d'ajouter la bibliothèque à votre projet.

Edit: Assurez-vous également que vous retournez toujours "false"; dans le gestionnaire de clic pour le lien, sinon, le "# div1" sera toujours ajouté à votre URL (merci @niaccurshi)

40
henser

scrollIntoView a fait le meilleur travail possible lorsque toutes les autres méthodes ont échoué!

document.getElementById('top').scrollIntoView(true);

Où 'top' est l'id du tag html que vous voulez aller.

19
stallingOne

Facilitez-vous la vie, essayez ce qui suit et faites-moi savoir s'il y a autre chose ;-)

<div>top</div>
<div style="height: 800px;">&nbsp;</div>
<div><a href="javascript:void(0);" onclick="window.scroll(0,1);">click here</a></div>

FYI: Vous n'avez besoin que de jouer avec une/une seule ligne href="javascript:void(0);" onclick="window.scroll(0,1);" et cela fonctionne pour vous.

Bonne journée!

5
mknayab

Seulement Ajouter ce code dans jQuery sur le document prêt

Réf: http://css-tricks.com/snippets/jquery/smooth-scrolling/

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^/ / , '') == this.pathname.replace(/^/ / , '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});
1
Saygın Karahan

Ajoutez un défilement régulier à chaque élément, y compris l'ancre, le bouton, etc., sans ajouter div id à l'URL :)

Info:scrollIntoViewOptions (facultatif) { comportement: "auto" | "instantané" | "lisse", bloc: "start" | "fin", }

function scrollSmoothTo(elementId) {
  var element = document.getElementById(elementId);
  element.scrollIntoView({
    block: 'start',
    behavior: 'smooth'
  });
}
#userdiv {
  margin-top: 200px;
  width: 200px;
  height: 400px;
  border: 1px solid red;
}
<button onclick="scrollSmoothTo('userdiv')">
  Scroll to userdiv
</button>

<div id="userdiv">
  Lorem ipsum this is a random text
</div>

DEMO

Référence: https://developer.mozilla.org/en/docs/Web/API/Element/scrollIntoView

0
Manoj Selvin

Je sais que j'ai 4 ans de retard, mais vous pouvez essayer cela.

HTML:

<a href="#div1">Link1</a>
<!-- you can put <br />'s here to see effect -->
<div id='div1'>link1 points me!!</div>
<!-- <br />'s here, too, to see effect -->

JavaScript/jQuery

$(document).ready(function(){
    $('a').on('click', function(event) {
        event.preventDefault();
        var hash = this.hash;
        $('html, body').animate({scrollTop: $(hash).offset().top}, 900);
    });
})
0
edsonski