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