Single page menu

I have a single page site which I built using Hugo framework.

This is how my menu looks

[[languages.en.menu.main]]
    url    = "/en/"
    name   = "Home"
    weight = -120

[[languages.en.menu.main]]
    url    = "/travelspage"
    name   = "Tours"
    weight = -119

[[languages.en.menu.main]]
    url    = "/about"
    name   = "About"
    weight = -118

[[languages.en.menu.main]]
    url    = "/blog"
    name   = "Blog"
    weight = -117

[[languages.en.menu.main]]
    url    = "/contact"
    name   = "Contact"
    weight = -116

Wha am I trying to achieve is that for example when I click Blog link in my menu it scrolls down to Blog page of my single page website. Instead what it does is just refreshes the page.

If I would use just normal site building with CSS and HTML for example I would do something like this:

<a href="#blog">Blog</a>

And when I would click on link it would scroll down to my section with id = "blog"

<section id="blog">

How can I achieve this using Hugo?

I tried something like this:

[[languages.en.menu.main]]
        url    = "/#blog"
        name   = "Blog"
        weight = -117

but it doesn’t work it still refreshes page and that is it.
Any tip would be appreciated.

Maybe just

url = "#blog"

I have tried and it still just refreshes the page and that is it :confused: