🐺 Scroll Suave para Link Interno – JavaScript Puro

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).

  • Matt Dev: VS Code.
  • J.S.Júnior: esse tema é diferente tem ele para liberar?.
  • Chris Answood: @J.S.Júnior so colocar origamid theme nos buscador de extensoes do VS.

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.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Sair da versão mobile