Szukam sposobu na włączenie efektu slajdu po kliknięciu łącza do lokalnej kotwicy w górę lub w dół strony.
Chciałbym coś, gdzie masz taki link:
<a href="#nameofdivetc">link text, img etc.</a>
być może z dodaną klasą, więc wiesz, że chcesz, aby ten link był linkiem przesuwnym:
<a href="#nameofdivetc" class="sliding-link">link text, img etc.</a>
Następnie po kliknięciu tego łącza strona przesuwa się w górę lub w dół do wymaganego miejsca (może to być element div, nagłówek, góra strony itp.).
Oto, co miałem wcześniej:
$(document).ready(function(){
$(".scroll").click(function(event){
//prevent the default action for the click event
event.preventDefault();
//get the full url - like mysitecom/index.htm#home
var full_url = this.href;
//split the url by # and get the anchor target name - home in mysitecom/index.htm#home
var parts = full_url.split("#");
var trgt = parts[1];
//get the top offset of the target anchor
var target_offset = $("#"+trgt).offset();
var target_top = target_offset.top;
//goto that anchor by setting the body scroll top to anchor top
$('html, body').animate({scrollTop:target_top}, 1500, 'easeInSine');
});
});
jquery
jquery-plugins
anchor
slide
ade123
źródło
źródło
$("a[href^=#]").click(function(e) { e.preventDefault(); var dest = $(this).attr('href'); console.log(dest); $('html,body').animate({ scrollTop: $(dest).offset().top }, 'slow'); });
history.pushState(null, null, dest);
ponieważ zapobiegasz zmianie domyślnego skrótu lokalizacjiZakładając, że Twój atrybut href prowadzi do elementu div o identyfikatorze tagu o tej samej nazwie (jak zwykle), możesz użyć tego kodu:
HTML
JAVASCRIPT - (Jquery)
źródło
name
. Kiedy używasz<a name="something"></a>
, możesz odwoływać się do niego również z zewnątrz, jednak twoje rozwiązanie tego nie zapewnia.To znacznie ułatwiło mi życie. Zasadniczo umieszczasz swój tag id elementów i przewija się do niego bez dużej ilości kodu
http://balupton.github.io/jquery-scrollto/
W Javascript
W Twoim html
Tutaj jestem na samym dole strony
źródło
źródło
+
z łańcuchami lub vars łączy je, jak:"#some_anchor"
.anchor_id + ""
Myślę, że naprawdę, drugie konkatowanie nie jest potrzebne.Należy również wziąć pod uwagę, że cel ma dopełnienie i dlatego użyj
position
zamiastoffset
. Możesz również uwzględnić potencjalny pasek nawigacyjny, na który nie chcesz nakładać celu.źródło
history.pushState({}, "", this.href);
aby aktualizować adres URLMoje podejście z jQuery polega na tym, że wszystkie osadzone linki kotwicy po prostu przesuwają się zamiast natychmiastowo przeskakiwać
Jest bardzo podobny do odpowiedzi Santi Nunez, ale jest bardziej wiarygodny .
Wsparcie
źródło
Utknąłem z moim oryginalnym kodem, a także dodałem zanikający link „powrót do góry”, korzystając z tego kodu i trochę stąd:
http://webdesignerwall.com/tutorials/animated-scroll-to-top
Działa dobrze :)
źródło
Możesz chcieć dodać wartości offsetTop i scrollTop w przypadku, gdy animujesz nie całą stronę, ale raczej zagnieżdżoną zawartość.
np .:
źródło
SS Slow Scroll
To rozwiązanie nie wymaga znaczników kotwicy, ale oczywiście musisz dopasować przycisk menu (dowolny atrybut, na przykład „ss”) do identyfikatora elementu docelowego w Twoim html.
ss="about"
zabierze cię doid="about"
Skrzypce
https://jsfiddle.net/Hastig/stcstmph/4/
źródło
Oto rozwiązanie, które zadziałało dla mnie. Jest to ogólna funkcja, która działa dla wszystkich
a
tagów odnoszących się do nazwanegoa
Uwaga 1: upewnij się, że
"
w html używasz podwójnych cudzysłowów . Jeśli używasz apostrofów, zmień powyższą część kodu navar target = $("a[name='" + name.substring(1) + "']");
Uwaga 2: W niektórych przypadkach, zwłaszcza gdy używasz paska samoprzylepnego z bootstrapu, nazwany
a
ukryje się pod paskiem nawigacji. W takich przypadkach (lub w każdym podobnym przypadku) możesz zmniejszyć liczbę pikseli z zwoju, aby uzyskać optymalną lokalizację. Na przykład:$('html,body').animate({ scrollTop: $(target).offset().top - 15 }, 'slow');
przeniesie Cię dotarget
15 pikseli na górze.źródło
Natknąłem się na ten przykład na https://css-tricks.com/snippets/jquery/smooth-scrolling/, wyjaśniając każdy wiersz kodu. Uważam, że to najlepsza opcja.
https://css-tricks.com/snippets/jquery/smooth-scrolling/
Możesz być natywny:
lub z jQuery:
źródło
Ok, najprostsza metoda to: -
W ramach funkcji kliknięcia (Jquery): -
HTML
źródło
Przetestuj tutaj:
http://jsbin.com/ucati4
źródło
następujące rozwiązanie zadziałało dla mnie:
źródło