Url przechodzi na diva, zamiast używać fukcji

Question

Witam,
Stworzyłem stronę internetową, która podzielona jest divami, i fukncję która pozwala się między nimi przenosić, problem polega na tym że wpisując adres URL www.index.com/#DIV1, strona zamiast używać TYLKO funkcji przejścia, używa funkcji oraz przenosi na diva z HTML.
Moje pytanie brzmi czy da się usunąć możliwość przejścia z poziomu linku URL przejścia na diva.

Z góry dziekuje

Answer 1

Chodzi Ci o to, że scrolluje do danego diva? Czy o co? Możesz pokazać tę stronę?

Comments

Używam funkcji

function scrollToPage(pageName, cb) {
    var pos = $('#' + name).offset();
    actualOffsetX = actualOffsetX + pos.left;
    actualOffsetY = actualOffsetY + pos.top
    wrapper.velocity({ left: -actualOffsetX, top: -actualOffsetY }, { easing: [25], complete: cb });
}

setPage = function(pageName) {
    scrollToPage(pageName)
    currentPage = pageName;
    var stateObj = { foo: pageName };
    history.pushState(stateObj, pageName, "#" + pageName);

}

Gdy przechodzę na dany adres np www.index.com/#div1 to zamiast tego żeby mi się użyła funkcja i żeby scroll zadziałał , to przeglądarka sama wchodzi na diva. Na chromie wszystko działa, problem ten występuje tylko na ff.

Edit: Chodzi o to żeby wyłączyć możliwość przejscia na diva z URL przeglądarki.
Bo wtedy wrapper który zaimplementowałem do przechodzenia na inne divy się krzaczy i przewijanie nie działa.

---

Pokaż stronę, będzie łatwiej ogarnąć.

---

Chętnie bym pokazał, niestety jest to strona na przetarg i nie mogę pokazywać kodu bez akceptacji klienta :l.
Ogólnie chodzi o to że mam napisany skrypt który podczas wczytywania strony, przechodzi na dana pozycje (diva). Problem tkwi w tym że podczas ladowania strony na Firefoxie, strona zamiast używać skrypta z przechodzeniem na diva, przechodzi na niego bezpośrednio. www.index.pl/#kontakt (#kontakt to zarówno nazwa diva, jak i dana pozycja na stronie). Chce po prostu wyłączyć możliwość przechodzenia na pozycje diva z poziomu URL.

---

Mówiąc krótko: nie da się. Możesz ustawić odpowiednie stylowanie dla :target

---

No dobra trudno, poszperam jeszcze po necie może coś się tam znajdzie.
Anyways, dzieki za help ;)

Answer 2

Oczywiście - proponuję załączyć do projektu jQuery (jeżeli go nie dodałeś) oraz mały skrypcik:

$(document).ready(function()  //When the page is ready, load function
{
    $("#something").click(function()  // When something is clicked
    {
        $("#target").scroll();                       // Scroll to the target
    });
});

Załączam dwa linki jak byś chciał poczytać o temacie:

1. scroll event

2. scrollTop event

żadne linkowanie do div'ów nie jest potrzebne ;)

Comments

Dzięki, mam :P Chyba źle napisałem w czym tkwi problem

---

żadne linkowanie do div'ów nie jest potrzebne ;)

Oczywiście, że jest! Jeśli odsyłamy usera do innego miejsca na stronie, robimy to przy pomocy linka → http://codepen.io/Comandeer/pen/bEPbqg

---

1. Codepen not found

2. Zrobienie przejścia przez JS jest łatwe w obsłudze, zrozumieniu i późniejszej edycji (dodawanie wszelakich efektów), więc nie upierał bym się przy pure HTML skoro do tego typu event'ów mamy JS'a

---

Codepen not found

To tępe forum dokleja spacje do końca linków :| Poprawione.

Zrobienie przejścia przez JS jest łatwe w obsłudze, zrozumieniu i późniejszej edycji (dodawanie wszelakich efektów), więc nie upierał bym się przy pure HTML skoro do tego typu event'ów mamy JS'a

W nowszych przeglądarkach starczy dorzucić do CSS scroll-behavior: smooth i mamy płynne przejście bez JS. Co więcej: nie mówię pure HTML, ale podstawa (czyli link) powinno istnieć i na podstawie tego można dobudowywać interakcję w JS. 

---

Doszliśmy do zrozumienia - oczywiście zgadzam się że podstawy do których przypinamy eventy powinny istnieć w HTML by nie obciążać komputerów użytkowników oraz nie tworzyć chaosu.Dlatego zaproponowałem powyższy skrypt. Howgh.

---

No ale właśnie Twój nie działałby dobrze z linkiem… ;) Bo np nie korzysta z jego atrybutu [href].

---

1. Moja propozycja

zamiast linku wrzucić div/button/anything i w css dorzucić "cursor: pointer;" + mój JS

2. Jeżeli link jest ważny

$(document).ready(function()
{
    $('.socials .fa').click(function(event)
    {
        event.preventDefault();
        window.open(this.href);
    });
});

---

zamiast linku wrzucić div/button/anything i w css dorzucić "cursor: pointer;" + mój JS

Odsyłanie do innego miejsca na stronie/innej strony = link. Tutaj chodzi o semantykę kodu, z której skorzystają choćby czytniki ekranowe.

Co więcej: istnieją tylko dwa elementy klikalne w HMTL: link albo przycisk (polecam porównać zachowanie ostylowanego span z button!). 

---

Dobra Chłopaki już sobie poradziłem, z pomocą przyszedł mi regex, ustawiłem funkcje znajdowania danego słowa w url, które potem zmieniałem, po czym gdy strona się wczytała(za sprawą loadera) słowo z powrotem się zmieniało.

Dziękuje wszystkim za pomoc i poświęcony czas, mam nadzieję że będziemy widzieć się w komentarzach coraz częściej.
Pozdrawiam V.

---

To brzmi jak cholernie przeinżynierowane rozwiązanie, które dodatkowo zabija domyślną funkcjonalność przeglądarki…

Na pewno dałoby się znaleźć coś sensowniejszego, gdybyśmy mieli dostęp do wersji pokazującej problem na żywo.