Supprimer le # en fin d'URL de ma page sur un scroll

**yule** · 06/12/2020, 01h30

Bonjour,

J'utilise un template bootstrap.

Je constate que sur mon bouton (bouton qui s'affiche en page de page après un scroll et qui permet de remonter automatiquement en haut de page) l'ajout d'un #

Mon bouton est de ce genre (chevron en icone)

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>

J'ai cherché la partie JS de ce code et j'ai trouvé ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/*=====================================
	Sticky
	======================================= */
	window.onscroll = function () {
		var header_navbar = document.querySelector(".navbar-area");
		var sticky = header_navbar.offsetTop;
 
		if (window.pageYOffset > sticky) {
			header_navbar.classList.add("sticky");
		} else {
			header_navbar.classList.remove("sticky");
		}
 
 
 
		// show or hide the back-top-top button
		var backToTo = document.querySelector(".scroll-top");
		if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
			backToTo.style.display = "block";
		} else {
			backToTo.style.display = "none";
		}
	};

Donc et quand j’utilise ce bouton me permettant de remonter tout en de ma page, il me rajoute un # => monsite.com/base.php#

Comment faire pour que ce # ne s’affiche pas en utilisant mon bouton ?

Merci pour votre aide
Yule

**-Nikopol-** · 06/12/2020, 07h17

essaye ceci : history.replaceState(null, null, location.pathname);

**yule** · 06/12/2020, 09h08

Bonjour,

Merci , cela fonctionne !

Toutefois, il affiche en une fraction de seconde le # puis ce dernier disparaît. (le mieux, serait de ne pas le voir du tout..)

Ne connaissant vraiment pas ce language (Juste des bribes)

J'ai utilisé votre solution de cette manière, est-ce approprié ainsi ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
                window.onscroll = function () {
		var header_navbar = document.querySelector(".navbar-area");
		var sticky = header_navbar.offsetTop;
 
		if (window.pageYOffset > sticky) {
			header_navbar.classList.add("sticky");
		} else {
			header_navbar.classList.remove("sticky");
		}
 
 
		// show or hide the back-top-top button
		var backToTo = document.querySelector(".scroll-top");
		if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
			backToTo.style.display = "block";
		} else {
			backToTo.style.display = "none";
		}
		history.replaceState(null, null, location.pathname);
		};

D'avance merci
Yule

**NoSmoking** · 06/12/2020, 09h45

Bonjour,

Je constate que sur mon bouton (bouton qui s'affiche en page de page après un scroll et qui permet de remonter automatiquement en haut de page) l'ajout d'un #

c'est le comportement normal lorsque l'on clique sur un lien que l'ancre se rajoute à l'URL.

Si tu veux supprimer ce comportement tu peux également passer par du JavaScript simplissime :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
const elem = document.querySelector(".back-to-top");
elem.addEventListener("click", function(e) {
  // supprime le comportement par défaut
  e.preventDefault();
  // remonte la page
  window.scrollTo(0, 0);
});

tes autres scripts s'enchaineront.

**-Nikopol-** · 06/12/2020, 09h45

En utilisant une ancre tu as forcement un # ici avec ce que je t'ai donné on le remplace. tu peux aussi ne pas en utiliser du tout :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .back-to-top{
            position: fixed;
            bottom: 0;
            right: 0;
            color: #fff;
            background: red;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            font-size: 40px;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <div class="back-to-top">
        ⇧
    </div>
    <div id="target">
    </div>
<h1>HTML Ipsum Presents</h1>
 
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
 
<h2>Header Level 2</h2>
 
<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ol>
 
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
 
<h3>Header Level 3</h3>
 
<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ul>
 
<pre><code>
#header h1 a {
  display: block;
  width: 300px;
  height: 80px;
}
</code></pre>
 
    <script>
        document.querySelector('.back-to-top').addEventListener('click',()=>{
            const element = document.getElementById('target');
            element.scrollIntoView({
                block: 'start',
                behavior: 'smooth'
            });
        })
    </script>
</body></html>

**yule** · 06/12/2020, 11h55

Merci à vous deux, c'est parfait !

Bon dimanche
Yule

Supprimer le # en fin d'URL de ma page sur un scroll

JavaScript

Discussions similaires

Partager

Partager