Smooth scroll does not detect #

JavaScript
1

I have tested smooth script and do not know why simple code is not detected. How to manage # as clicked links should not show up #1@#%^-bottom inside URL.

Source: Chris Ferdinandi: https://github.com/cferdinandi/smooth-scroll

Demo version: https://codepen.io/cferdinandi/pen/wQzrdM

<!DOCTYPE html>
<html lang="en" >
<head>

<meta charset="UTF-8">
<title>CodePen - CSS Smooth Scroll Demo</title>
<script src="js/smooth-scroll.polyfills.min.js"></script>
<script src="js/javascript.js"></script>
<link rel="stylesheet" href="css/style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<p id="top">
	<a href="#bazinga">Go to the middle</a><br>
	<a href="#1@#%^-bottom">Go to the bottom</a>
</p>

<p>
	.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
	.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
	.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
</p>

<p id="bazinga"><a href="#1@#%^-bottom">Go to the bottom</a></p>

<p>
	.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
	.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
	.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
	.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
	.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
	.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
</p>

<p id="1@#%^-bottom"><a href="#">Go back to the top</a></p>
<!-- partial -->
  
</body>
</html>

Javascript:

var scroll = new SmoothScroll('a[href*="#"]');
2

Hi @toplisek, just set the updateURL option to false:

4

I’m using both options but it does not work.

  var scroll = new SmoothScroll('a[href*="#"]:not([data-easing])');
  updateURL: false;
/*  var defaults = {
  speed: 500,
  updateURL: false
  };
*/

I’m using smooth-scroll.polyfills.min.js not smooth-scroll.min.js

5

[offtopic]
You can now have a smooth scroll to links in CSS with one line of code if that’s the only thing you are interested in?

html,
body {
  scroll-behavior: smooth;
}

(Not available in IE11, Safari or IOS yet. )

[/offtopic]

3 Likes
6

That’s not valid syntax – just check the console for errors. You’ll have to pass an options object to the constructor like so:

var scroll = new SmoothScroll('a[href*="#"]', {
  updateURL: false
})
2 Likes
7

Although it can be polyfilled, I learned recently.

2 Likes
8

Thank you for all messages. It works. It seems CSS development is in a lack of time and it needs to be done using programming (JavaScript). Scroll To plugins are the most downloaded plugins and still not solved using CSS. There are many issue to be solved in CSS like #, position on another page or the same page, speed, speed method… In this moment only JavaScript solved a problem.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.