Javascript For Hiding Page ID

Design help General
1

I added this code to hide the section id from the browser widow. The code works and hides the section id. The problem is that now instead of scrolling directly to the section it cuts part of the section off, scrolling into the section itself. I would love to find a fix for this or another method of hiding section id’s

If you go to the published site and choose any button you will see exactly what I am referring to.

Read link: https://preview.webflow.com/preview/soulluciani?preview=47f3cf66ef1b25b2e9f07610008499ee
Published site link: http://soulluciani.webflow.io

<script>$(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); });</script>

2

Try adding more top margin to your sections. The reason for the cut off may be due to the Nav bar floating on top of each section.

3

@PixelGeek I can try that. The thing is it was working perfect before I added the code. Is there another way to hide the section id that won’t mess with anything else?

4

Hello @soulluciani, I had the same issue, but without using any js.

I used advices from this topic and it worked perfect:
Getting Webflow's smooth scroll script to align correctly with fixed headers/navigation:

In short: Create a div and give it html tag HEADER in a settings panel. Make it fixed position. Move navigation inside this header and make it position relative or auto. Then browser will count bottom line of the header as a top line of the browser window.

1 Like
5

Webflow’s smooth scrolling code relies on the standard way of parsing out the #section_name from standard URLs, and it looks like that script completely rewrites them into name attributes. Because of that, unfortunately this script is not compatible with our scrolling code :expressionless:

Just curious, why do you want to hide the section ID from the URL? It can actually harm usability in that it becomes harder to link to a specific portion of the page.

1 Like
6

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