ūüźļ Scroll Suave para Link Interno - JavaScript Puro

Publicidade


Essa t√©cnica serve principalmente para sites que possuem uma √ļnica p√°gina e a navega√ß√£o √© feita atrav√©s de links internos.

Arquivos:
https://github.com/origamid/publico/tree/main/scroll-suave-para-link-interno-javascript-puro

https://codepen.io/origamid/pen/eKGvdo

Source: Origamid

52 Coment√°rios:

Rob Maycon: Cara seu video me ajudou de mais, e foi exatamente o que eu tava procurando pra terminar meu portfolio! ja ganhou mais um inscrito, vc ensina muito bem! ( 4 Likes).

Eduardo Ramalho de Melo: Depois de muito procurar, achei seu vídeo e foi perfeito era exatamente o que eu precisava, por mais exemplos práticos e sucintos como esse. parabéns.

Andr√© Benedicto: √ďtima aula! Me ajudou demais, obrigado e parab√©ns.

Henrique Bortoletto: Vou dar um jeito de comprar seus cursos. A simplicidade e o objetivo das aulas s√£o grandes diferenciais. ( 3 Likes).

Giovanni Vieira: Gratid√£o!! Era exatamente isso que estava precisando!! Perfeito! ( 2 Likes).

Marian Douglas: sem d√ļvidas, as aulas s√£o ricas e simples de entender. Ainda compro o seu curso esse ano..

Mateus Prado: Cara, suas aulas são muito boas. Parabéns..

Matheus Ramalho: Conte√ļdos atuais sempre, boa Andr√©! Achei bacana esse tema seu, teria como mostrar as configura√ß√Ķes que vc usa no VS Code , no caso o .json. Abra√ßo.

Luiz Felipe: Vídeo incrível, ajudou muito!.

Edson Junior: √ďtimo v√≠deo, parab√©ns pelo o trabalho, Para quem est√° quebrando a cabe√ßa e quer algo mais simples, basta add a seguinte linha em seu arquivo css : html{scroll-behavior: smooth} que ir√° fucionar! Dependendo do navegador √© claro ( 3 Likes).

Caique Moraes: Excelente vídeo! Obrigado pela dica.

Valber Soares: Aula boa, manda muito bem no js; ( 1 Likes).

Werllen trindade: Parabéns, me ajudou muito.

Bruno dscolado: parabens parceiro, me ajudou muito seu jeito de passar é simples e explicativo, ótimo videio... ja virei seu fã kkkkkkkkkkkk.

Edson jose duarte: Valeu meu amigo. Showwwww. Muito bem explicado ....

Junior Alves: Muito bom o vídeo Ajudou d+.

Renan Coelho: √Č poss√≠vel detectar se o browser suporta a funcionalidade nativamente? Se sim, como? Obrigado pelas dias, Andr√©! .

Gidenilson Santiago: Valeu mesmo! Parabéns..

Wesley Gomes: Muito obrigado pelos vídeos, me ajudou muito...

Claudinei Messias: Aula top, no meu caso mesmo com o chrome não funciona, só a segunda opção deu certo!.

Gesse Gonçalves: cara muito bom parabéns.

Bruno Senna: André, ótima aula! Qual editor é este que você está usando ? ( 1 Likes).

Henrique Silva: Quem estiver desbravando o universo do front está no lugar certo. O André saca demais e, além disso, sabe repassar..

L√ļcio Carvalho: mds at√© hoje n√£o sabia que dava pra usar regex nos seletores CSS, √≥timo v√≠deo.

Kprenel • h√° 9 anos: 7:16 eu troquei o event.target por this e funcionou perfeitamente, al√©m de ter simplificado o c√≥digo ( 2 Likes).

Rodrigo Antunes: Uma maneira mais simples é no css fazer assim: html { scroll-behavior: smooth; } :target { scroll-margin-top: 1em; } e Depois usar os ids nos links das páginas simples assim.

Fabio Gon√ßalves: Achei muito bom, mas pra mim que sou iniciante as explica√ß√Ķes s√£o confusas e muito r√°pidas pra assimilar. Talvez daqui 1 ano eu entenda tudo que ele est√° falando nesse v√≠deo.

  • Origamid: √Č uma aula intermedi√°ria Fabio, √© necess√°rio entender a sintaxe / funcionalidades do JavaScript. ( 1 Likes).

Vinicius Mendes: loguei só pra dar um like a agradecer !!! muito bom !!.

roberto rezende junior: Animal cara muito bom parabéns e obrigado, em junho de 2020 ainda ta com essa zica no safari..

O Redpillado: Brother qual theme você está usando no vscode nesse video, e como você deixa a fonte nesse estilo? Obrigado!.

  • serumaninho: O nome do tema √© Dark Material Dracula.

João Cláudio: gostaria de saber como usar esse código com os botoes em uma div. por exemplo tenho 3 divs e queria apertar o botão em uma div e pular para a segunda, apertar um botao na segunda e pular para a terceira e ter um botão de voltar em cada uma delas. se puder ajudar.

Pedro JS Bezerra: Eu aqui em 2021 nao conhecia essa parada do # , imaginei que fosse muito mais complexo..

Priscila Ayumi: Muito obrigada André!.

estevaolibardi: Excelente!.

Eduardo P. Franceschi: Show de bola mano!.

Sérgio Felipe: Fala André, blz? Queria saber se nos seus cursos de JavaScript vc utiliza design patterns, ou alguma metodologia pra deixar o código bem estruturado e de fácil manutenção pra quem trabalha em times..

  • Origamid: No curso atual n√£o, meu foco √© mais em quem est√° iniciando, por isso foco mais nos conceitos de JS do que em organiza√ß√£o de c√≥digo. E o curso √© bem focado em jQuery tamb√©m esse atual. Mas estou produzindo o pr√≥ximo que √© o de ES6+. ( 1 Likes).
  • S√©rgio Felipe: Ah, blz, sem problemas. S√≥ perguntei porque curto muito a sua did√°tica e metodologia de ensino, e, to saindo do iniciante pro intermedi√°rio em JS, e Design Pattern meio que √© um requisito, mas ainda n√£o achei conte√ļdo bem explicado sobre esse assunto na web.
    De qualquer forma, vlw pela info e assim que eu tiver oportunidade, vou pegar seu curso pra dar uma reciclada. E sobre o de ES6, vai ajudar pra caramba tbm! Abraço e sucesso!.

Leandro Almeida: Qual fonte você está utilizando no editor?.

  • Origamid: Leandro Almeida IBM Plex Mono.
  • Origamid: Leandro Almeida com o meu tema:

    https://marketplace.visualstudio.com/items?itemName=origamid.origamid-theme.
  • Leandro Almeida: Vlw.

Paulo Guedes: O Scroll do javascript j√° ficou nativo em todos os navegadores ?.

Randys Machado: √Č poss√≠vel deixar o scroll mais suave?.

  • autovrum: onde estiver 400 no js vc coloca ex 800 isso vai faz√™-lo mais "suave".

autovrum: alguém féra ai no js poderia me informar como fazer este código com window location, sem precisar do click? pois tenho um site e preciso que ele link internamente automaticamente porém suave..

Glebson Santos: Alguém sabe se atualmente o safari já tem suporte a esse comportamento?.

H.9: Que foda mano!.

jamson dourado: tem como fazer a mesma coisa para links externos ?.

  • Chris Answood: nao teria por quevoc√™ pode fazer com qualquer link, mais se quiser fazer com que o navegador carregue os links, ai so ajax men.

tifok lilu: na parte de declaração da session o meu retornou null ( 2 Likes).

Daniel Lambarri: hi! what is your font??? is excelent!.

System32: Quando eu coloco o event.preventDefault, ele para de rolar até a SECTION que eu quero. ( 1 Likes).

  • StomperHK: O Event.preventDefault(), como o nome sugere, vai prevenir que a√ß√Ķes padr√Ķes do navegador atingam o elemento que disparou o evento. No caso de √Ęncoras ele impede que o ancoramento seja feito..

Wellerson: qual é a font do site ?.

Marco Antonio Alves Pereira: √Č chato quando uma coisas funciona em Browser mas em outro n√£o.

Diego Batista: √Č s√≥ adicionar esse estilo no css e j√° faz isso, sem mexer com javascript. html { scroll-behavior: smooth; } ( 22 Likes).

  • Origamid: N√£o funciona no Safari, e o objetivo da aula √© ensinar JavaScript mais do que ensinar o efeito. ( 12 Likes).
  • Victor Queiroz: caraca, sensacional. Valeu Diego!! economizou mt meu tempo hehe. ( 2 Likes).
  • Thiago Henrique Fragata: isso no bootstrap? ( 1 Likes).
  • Chris Answood: Basicamente sim, mas a url ficaria com a #..., ai mermao, s√≥ js pra tirar ( 1 Likes).
  • H.9: O objetivo √© Java script puro pia ( 3 Likes).
  • H.9: @Victor Queiroz hahahaha aprende rapaz ( 1 Likes).
  • Vinicius Macedo: Mas ai a barra de navega√ß√£o acaba comendo o t√≠tulo e uma barra fixa no top √© uma pratica de UI. (N√£o sei se estou falando besteira, me ajudem) ( 1 Likes).
  • Cristian Renan de Freitas: Muito bom.

Módulo Base: Boa.

Jason Ming Hong: Engraçado, nos vídeos relacionados tem um cara com a voz igual à sua kk https://www.youtube.com/watch?v=45WlF5XtesE&t=6s.

Cristiano Gotardi: cliquei aqui, clicou.

ATENÇÃO: Os comentários não correspondem a opinião do proprietário deste site e foram extraídos de forma automática. Este artigo não possui fim comercial e tem por objetivo apenas o estudo da tecnologia Selenium. Caso algum comentário aqui presente seja abusivo ou fira alguma lei, favor nos informar para que possamos removê-lo o mais rápido possível.

Javascript
maio 26, 2022
0

Coment√°rios

Pesquisar

√öltimos Coment√°rios

Fale Comigo