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

Version imprimable

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:

<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:

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

06/12/2020, 07h17
-Nikopol-

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

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:

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

Bonjour,

Citation:

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:

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.

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:

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>

06/12/2020, 11h55
yule

Merci à vous deux, c'est parfait !

Bon dimanche
Yule