Reescrevendo URL - usar o mod_rewrite ou resolver o JS

[wneo 5]

Boa tarde!

 

Montei um site no estilo One page, e a url fica: http://site.com.br/#inicio ou http://site.com.br/#pagina2 ou http://site.com.br/#pagina3

conforme navega-se nele. Gostaria de tornar a url mais amigável, mostrando somente http://site.com.br/inicio ou http://site.com.br/pagina2

ou seja, removendo a hash.

 

Tentei com o htaccess mod rewrite, dessa forma:

RewriteEngine on

RewriteRule ^http://site.com.br/#inicio$ http://site.com.br/inicio

Mas não deu certo, continua igual. Será que a melhor forma de resolver é pelo mod_rewrite ou pelo JS do one_page? Abaixo vai o JS utilizado:

$(document).ready(function () {
    $(document).on("scroll", onScroll);
    
    //smoothscroll
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");
        
        $('a').each(function () {
            $(this).removeClass('active');
        })
        $(this).addClass('active');
      
        var target = this.hash,
            menu = target;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top+2
        }, 500, 'swing', function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });
});

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('#menu-center a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#menu-center ul li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

Alguém sabe como resolver utilizando o mod_rewrite ou adaptando esse JS??????

[Alex Hiroshi 7]

Olá,M

mod_rewrite não vai ajudar nesse caso, já que a página não é atualizada. Tente usar history.pushState.

[wneo 5]

Olá,M

mod_rewrite não vai ajudar nesse caso, já que a página não é atualizada. Tente usar history.pushState.

Esse recurso é para bem utilizado para implementar com ajax certo?

mas como eu poderia icrementar no meu js onde tenho links internos. do tipo <a href="#pagina2">Pagina2</a> ?

 

 

Alguem saberia me dizer...?

[Alex Hiroshi 7]

Olá,

 

Você tem que substituir a parte do seu código que você trata o hash pelo que eu te falei. E se você quer mudar a URL para uma mais bonita, terá que alterar o seu link para ficar como href="pagina".

[wneo 5]

Olá,

 

Você tem que substituir a parte do seu código que você trata o hash pelo que eu te falei. E se você quer mudar a URL para uma mais bonita, terá que alterar o seu link para ficar como href="pagina".

Mas olha só, esse é o JS, como colocaria o pushState aqui:

$(document).ready(function () {    $(document).on("scroll", onScroll);        //smoothscroll    $('a[href^="#"]').on('click', function (e) {        e.preventDefault();        $(document).off("scroll");                $('a').each(function () {            $(this).removeClass('active');        })        $(this).addClass('active');              var target = this.hash,            menu = target;        $target = $(target);        $('html, body').stop().animate({            'scrollTop': $target.offset().top+2        }, 500, 'swing', function () {            window.location.hash = target;            $(document).on("scroll", onScroll);        });    });});function onScroll(event){    var scrollPos = $(document).scrollTop();    $('#menu-center a').each(function () {        var currLink = $(this);        var refElement = $(currLink.attr("href"));        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {            $('#menu-center ul li a').removeClass("active");            currLink.addClass("active");        }        else{            currLink.removeClass("active");        }    });}

Ainda não consegui :upset:

[Alex Hiroshi 7]

Olá,

 

Nos mostre as suas tentativas.

[wneo 5]

Olá,

 

Nos mostre as suas tentativas.

Oi,

com o htaccess tentei assim

RewriteEngine on

RewriteRule ^http://site.com.br/#inicio$ http

e no JS precisos de uma luz para customizá-lo:

$(document).ready(function () {
    $(document).on("scroll", onScroll);
    
    //smoothscroll
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");
        
        $('a').each(function () {
            $(this).removeClass('active');
        })
        $(this).addClass('active');
      
        var target = this.hash,
            menu = target;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top+2
        }, 500, 'swing', function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });
});

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('#menu-center a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#menu-center ul li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

[Alex Hiroshi 7]

Olá,

 

Troque os seus location.hash por history.pushState. Veja na documentação que eu postei como usá-lo.

[wneo 5]

Olá,

 

Troque os seus location.hash por history.pushState. Veja na documentação que eu postei como usá-lo.

Tentei mudar assim:

1. window.history.pushState( href, response.find('title'), href );

e nos links adicionei um title, para q a url mostrasse o novo nome, q escrevi no title do link.. mas não deu nada...

[Alex Hiroshi 7]

Olá,

 

Nem erros?

O que é href e o que é response?

[wneo 5]

Olá,

 

Nem erros?

O que é href e o que é response?

Nenhum erro...

Com essa sintaxe compreendi que ao clicar, a resposta do navegador, "response", em um link "href" o conteudo escrito no "title" referente a ele seria imposto na url...

mas nada aconteceu..nem erro.. continuou igual.

 

 

alguem ai...