11
votes

Gardez l'URL non affectée lorsque la liaison d'ancrage est cliquée sur

J'ai vérifié d'autres messages ici, aucun résultat de ce que je recherche. Je veux cliquer sur xxx

et devez-le faire défiler jusqu'à cet élément sans mettre www.domain.com/#about dans la barre d'adresse

comme exemple parfait s'il vous plaît vérifier Sur ce site que j'ai trouvé ici et cliquez sur certains des liens - Ils ne changent pas la barre d'adresse lorsque vous avez cliqué.


2 commentaires

Vous devrez utiliser JavaScript pour empêcher le comportement par défaut.


@Blancer pourriez-vous être plus précis s'il vous plaît? Je ne sais pas comment mettre en œuvre cela.


5 Réponses :


1
votes

joué avec cela moi-même et voici un résumé de mes apprentissages sur le sujet.

Voici la commande de lien de base: xxx

Voici comment vous indiquez où Sauter fera défiler la page: xxx

voici ce qui se passe

La commande A une HREF est identique à un lien de base, à l'exception du lien qui consiste plutôt à un mot de passe. qu'une URL.

Veuillez noter qu'il y a un # signe devant le mot de code. Vous avez besoin de cela pour indiquer que c'est un lien interne. Sans le signe #, le navigateur cherche quelque chose à l'extérieur de la page nommée d'après votre code de code.

Votre "Codeword" peut être à peu près tout ce que vous voulez. Je fais de mon mieux pour le garder court et le faire indiquer ce qu'il saute. Il pourrait y avoir une limite au nombre de lettres que vous pouvez utiliser - mais je ne l'ai pas encore trouvée.

Le point où la page sautera suit le même format général, sauf que vous remplacez le mot href. Avec le nom de mot.

Veuillez noter qu'il n'y a pas de # signe dans la commande Nom.

Remarque! Lorsque vous placez, la cible de nom apparaîtra en haut du navigateur d'écran.

espère que cela aide.


0 commentaires

3
votes

Vous pouvez faire ce que vous voulez utiliser JavaScript et JQuery, exemple ci-dessous (notez que cela utilise une ancienne version de JQuery): XXX


1 commentaires

C'est spécifiquement l'événement.Proventdefault (); Cela fait ---- Sans que vous obtenez un flash ennuyeux de l'endroit où il finit ensuite, suivi du défilement à cet endroit ... Donc, ne pas mettre à jour l'URL n'est pas intentionnelle, je pense. [Il est également mauvais que je pense: arriver en hyperlien vers une section spécifique, un utilisateur naïf ne peut pas cliquer sur une autre section et copier l'URL pertinente et mise à jour pour passer; Ayant défilé ailleurs, après rafraîchir Je suis de retour ailleurs.]



1
votes
window.location.hash = ""  
is the possible way I could find. hash gives the string next to #.

7 commentaires

Pourriez-vous s'il vous plaît élaborer sur cette réponse, je n'ai aucune idée de ce que vous voulez dire exactement. Donc, vous avez la partie à côté de #, puis? Je ne sais pas ce que cela a à voir avec la conservation de l'URL non affectée lorsqu'un lien d'ancrage est cliqué. Peut-être un exemple rapide comme op?


Dans mon cas, je devais montrer une partie de l'URL avant l'ancre, pour que l'URL soit belle. Je voulais donc tronquer les liens d'ancrage. Window.Location Object stocke les pièces URL. w3schools.com/js/js_window_location.asp . L'URL Patront AFTHER Le # est attribué à fenêtre.Location.Hash. J'ai donc attribué une valeur vide à ce que je puisse seulement montrer une partie de l'URL.


@Invest pourriez-vous s'il vous plaît expliquer la justification du bowvote?


En tant que FAS que je comprenne, la question est plus liée à "Comment puis-je faire défiler les liens d'ancrage sans les montrer dans l'URL?" et pas sur le point d'avoir vraiment une belle URL.


Exactement @Invest, lorsque vous cliquez sur l'ancre, le HREF est ajouté après le # (hachage). Donc, si vous faites la fenêtre.Location.hash = "" Une fois l'ancre cliquée, la HREF de l'URL serait remplacée par une chaîne vide. J'espère que je suis clair cette fois-ci.


D'accord maintenant je comprends mieux, merci. Mais ce n'est que la moitié de l'histoire, non? Comment implémenteriez-vous le "défilement à un certain point" sans utiliser ? Ou avez-je mal compris votre réponse et que vous utilisez href = "# sur" et ensuite, vous faites la fenêtre.Location.hash = "" Pour effacer l'URL?


Oui, il fait d'abord défiler la page au lien interne, puis définir window.location.hash = "" .



0
votes

// N'utilisez pas A, utilisez la classe

 $(document).ready(function(){
 $(".mouse").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
  if (this.hash !== "") {
  // Prevent default anchor click behavior
  event.preventDefault();
 // Store hash
  var hash = this.hash;
 // Using jQuery's animate() method to add smooth page scroll
  // The optional number (800) specifies the number of milliseconds it takes 
 to scroll to the specified area
  $('html, body').animate({
    scrollTop: $("#section").offset().top
  }, 800, function(){
   // Add hash (#) to URL when done scrolling (default click behavior)
    window.location.hash = "";
  });
} // End if  }); });


0 commentaires