Smooth one page site with changing URL

  • morene

    (@morene)


    8 years, 2 months ago

    Hi,

    I´m a beginner in creating custom WP themes. I tried to make one page site. When I clicked on manu link the site scrolled down on page but I wanted to do smooth scrolling so I added jquery code:

    $(function(){
    var menu1 = $(“.menu-top”);
    var menulink1 = menu1.find(‘a’);

    $(menulink1).on(“click”, function(){
    $(‘html,body’).animate({scrollTop: $(‘[name=”‘ + $.attr(this, ‘href’).substr(1) + ‘”]’).offset().top
    }, 500);
    return false;
    });
    });

    $(function(){
    $(‘.back-to-top’).on(‘click’, function(){
    $(‘body’).animate({ scrollTop: 0});
    });

    Now my scrolling is smooth but when the site scroll down URL address doesn´t change is still fidastav.konekto.net. I would like to have fidastav.konekto.net/#portfolio or fidastav.konekto.net/#kontakt.

    How do I fix it? And is there any code when I scroll down/up with mouse change this url?

    Thanks a lot

Viewing 1 replies (of 1 total)
  • Thread Starter morene

    (@morene)

    8 years, 2 months ago

    I fixed it and changed this code:

    $(function(){
    var menu1 = $(“.menu-top”);
    var menulink1 = menu1.find(‘a[href*=#]:not([href=#])’);

    $(menulink1).on(“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) {
    var hash = this.hash; // ‘this’ will not be in scope in callback
    $(‘html,body’).animate({ scrollTop: target.offset().top }, 1000, function() {
    location.hash = hash;
    });
    }
    }
    });

    });

    so URL address change when I click on menu link but on mouse scrolling url doesn´t change. Do you know what should i do.

    Thanks for help

Viewing 1 replies (of 1 total)
  • The topic ‘Smooth one page site with changing URL’ is closed to new replies.