Это видео недоступно.
Сожалеем об этом.

How to add Smooth Scrolling to your one page website with jQuery

Поделиться
HTML-код
  • Опубликовано: 16 авг 2024

Комментарии • 268

  • @AshishUX
    @AshishUX 5 лет назад +1

    They way you are teach, with so simplicity and your perspective towards whatever niche you touch, you just make it so simple like it was nothing, adding a big positivity towards struggle with my work. Thanks a ton Kevin.

    • @KevinPowell
      @KevinPowell  5 лет назад

      So glad that you enjoy my approach Ashish! Thanks for taking the time to let me know :)

  • @NicholasMaietta
    @NicholasMaietta 5 лет назад

    For people with severe attention deficit disorder, this is a feature that really can help out. Sudden jumps between content can cause disruption in concentration. This is the case for me. It takes me a few seconds to regain my concentration after moving to new pages. (I probably qualify for disability, but don't bother. I continue to struggle through it). This smooth scroll feature is quite nice and in my opinion, a usability enhancement.

  • @berliandro
    @berliandro 6 лет назад +5

    You are my favorite web design channel on youtube! 😁😁

  • @pekotunes
    @pekotunes 5 лет назад +1

    This is the most easiest tutorial I have come across to date! Very clearly explained and I like that you explain what the coding language means too. Thank you so much! You don't know how much I've struggled with this! Subscribed :)

    • @KevinPowell
      @KevinPowell  5 лет назад

      So glad that you like my approach Annie! Welcome aboard!

  • @busyrand
    @busyrand 5 лет назад

    This was an absolute joy to follow along with. You've sold me on the use of Codepen as an easy to use Dev Environment. I'll definitely be adding this to one of my projects, preferably using traditional Javascript on my portfolio website. The jQuery explanations are fantastic to get familiar with how things work. Well done!

  • @garypurcell7183
    @garypurcell7183 5 лет назад

    Just come across your channel last few days. You're my goto man now, Kev. Keep it rolling.

    • @KevinPowell
      @KevinPowell  5 лет назад

      Thanks Gary, super glad that you're enjoying my content!

  • @juan-pablobotero4609
    @juan-pablobotero4609 3 года назад

    Your videos are just great. Always professional, always helpful. Thanks!

  • @kennan10101
    @kennan10101 5 лет назад

    Awesome video! Very straightforward code and your explanation of each part makes it all so easy to understand.

  • @conintava514
    @conintava514 6 лет назад

    Thank you for your tutorials! They're really helpful and easy to follow. Really appreciate you for making these :)

  • @KyleMerl
    @KyleMerl 6 лет назад

    FANTASTIC TUTORIAL! Very easy to follow and understand. Thanks so much!

  • @julianapereira381
    @julianapereira381 3 года назад

    I wish I could live this link a 1000 times!

  • @pursadas
    @pursadas 4 года назад

    I absolutely LOVE your tutorial videos!

  • @brianrahmarela6552
    @brianrahmarela6552 4 года назад

    WOW Awesome!! i only expected to smooth scrolling but there is tutorial about active linking switching!! amazing. thanks a lot sir!! god bless you. subscribed!

  • @TekJonesdesigns
    @TekJonesdesigns 3 года назад

    Simplified for me. In my head, it was a lot more code

  • @EumirArcilla
    @EumirArcilla 7 лет назад

    Excellent video tutorial you got here. Please make more. Thank you.

    • @KevinPowell
      @KevinPowell  7 лет назад

      No plans on stopping anytime soon 😁, and glad you liked it!

  • @azizmavlyanov3145
    @azizmavlyanov3145 6 лет назад

    Very very great tutorial, Kevin! Thank you so much!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  • @sororbudwiser
    @sororbudwiser 7 лет назад

    Another great tutorial, Kevin. Thank you!

  • @Lx45_
    @Lx45_ 3 года назад

    Awesome tutorial!

  • @Akhilkumar332
    @Akhilkumar332 7 лет назад

    As i'm a learner, this helps me a lot. Thank you :)

  • @Achalacha
    @Achalacha 5 лет назад

    Very interesting and it's seem very useful ! I will try to use it in my future project

  • @petarpavlov4826
    @petarpavlov4826 7 лет назад

    Great video! Working perfectly! :) Nice job Kevin

    • @KevinPowell
      @KevinPowell  7 лет назад

      Good to hear, glad you liked it Petar!

  • @manuelsilva4931
    @manuelsilva4931 3 года назад

    You have a new subscriber, man!

  • @icwhy4366
    @icwhy4366 Год назад

    I know this video is 5 years old but it is important to add Window.location = (this) under the scrollLink.click(function(e) {
    This way the browser URL also changes to the correct position and wil still be active on reloading the page.

  • @sircoko
    @sircoko 6 лет назад

    This video was SO GREAT!!! Thanks for sharing your knowledge :)

  • @theunorthodoxcoder
    @theunorthodoxcoder 6 лет назад

    Thank you. This was a much needed video :)

    • @KevinPowell
      @KevinPowell  6 лет назад

      Good to hear, glad you liked it!

  • @kresimircosic6158
    @kresimircosic6158 7 лет назад

    Keep it coming, it is beautiful to learn.

  • @RnRoadkills
    @RnRoadkills 3 года назад

    These kind of videos, please start showing the scrolling. Then we know if it is what we are looking for. And you don´t need to explain a non-scrolling page. We already know that. That’s why we clicked the video.

  • @muurio
    @muurio 7 лет назад +1

    Fantastic video as always! :)
    Would it be possible for you to do a tutorial on how to create a fade/slide in effect on scroll?

    • @KevinPowell
      @KevinPowell  7 лет назад +1

      Thanks Zari, I'm glad you liked it! And great idea for a video, thank you!

  • @tommyzDad
    @tommyzDad 6 лет назад

    Here's hoping you will find the time to do a pure/ vanilla Javascript version of this, that would also include functionality to close the menu on click (when the site is viewed on a mobile device).

  • @sivakumaranpr773
    @sivakumaranpr773 4 года назад

    thank you so much sir it was really helpfull

  • @tdsimpson
    @tdsimpson 4 года назад

    Very helpful! Great job

  • @arsalanshaikh3763
    @arsalanshaikh3763 7 лет назад

    clear beautiful and well explained thanku Subscribed May God Bless u keep up sir

    • @KevinPowell
      @KevinPowell  7 лет назад

      Thank you so much for the kind words! Makes me so happy when people learn something useful from these :D

  • @eakcantey
    @eakcantey 5 лет назад

    Great video! Really helped a lot!!!

  • @AresAz
    @AresAz 6 лет назад

    Thanks Man. Keep up the Good Work

  • @ck0024
    @ck0024 5 лет назад

    *Learnt a lot.*

  • @nooby4681
    @nooby4681 4 года назад

    This is awesome! Do you know how to close the navbar once you select something?

  • @VishalKumar-mt4bl
    @VishalKumar-mt4bl 7 лет назад

    another great tutorial. keep Up the good work.

  • @alexiscorbacho8021
    @alexiscorbacho8021 6 лет назад

    nice one man. Added to my portafolio

  • @genelarose3055
    @genelarose3055 5 лет назад

    thank you for the video..I am learning a ton from your channel....however I am getting a "top" undefined error in the .scroll(function() offset().top undefined.....would you know why I am getting this error?

  • @fromscratch715
    @fromscratch715 6 лет назад

    Thank you very much for the video. I just have one question: When you scroll up by hitting the Home button, the page doesn't go all over the top, and there is a small distance left. This can be seen at 9:56. Is there a way to fix this?

  • @robingerold
    @robingerold 4 года назад

    thanks, saved my day :)

  • @jeffreydillen6900
    @jeffreydillen6900 4 года назад

    Hello, i have a question, everything works, the smoothscroll and active link switching. BUTT..... the active link switching is not working with my footer. (in my footer i have made to contact page. do you know how i can fix it? of does active link switching not work with a footer?

  • @muted1416
    @muted1416 3 года назад

    how about vertical one page website

  • @gmangsxr750
    @gmangsxr750 4 года назад

    One thing I noticed is that if your last section isn’t tall enough with content, it’s top will never reach the top of the screen to highlight the nav option

    • @KevinPowell
      @KevinPowell  4 года назад

      Yes, that's true! It's a hard one to overcome too, but most websites will have some sort of footer or extra content at the end that isn't included in the navigation, which would help with that type of situation.

  • @sharonkim3151
    @sharonkim3151 6 лет назад

    Works perfectly, thank you!!

  • @studiocity10
    @studiocity10 6 лет назад

    Thanks man. You saved the day.

  • @kayasthakunj6092
    @kayasthakunj6092 6 лет назад

    Very well decode sir..Thank u so much...

  • @ankit286pandey1
    @ankit286pandey1 4 года назад

    When I click on anchor link multiple times , animate function is called several times that results in a lot of delay for other anchor link click animation. Do you know how to solve this ?

  • @dhruvsoni8617
    @dhruvsoni8617 3 года назад

    Sir which software for coding you are using?

  • @sorayaali8447
    @sorayaali8447 6 лет назад +2

    Hey, why did I follow this exactly and it is not working for me?? And Yes I linked the file correctly to my html and made sure by popping up an alert box. I'm watching this in december, has anything changed? I'm working on my portfolio and it would really help if I could get this smoothing scrolling to work! Thanks in advance.

    • @KevinPowell
      @KevinPowell  6 лет назад +1

      Everything should still work the same as when I made it. Right click and open Inspector. Click over to the 'Console' and see if any errors are coming up.

    • @SuperWombus
      @SuperWombus 6 лет назад

      Same; keep getting Uncaught Reference error: scrollBarLocation is not defined. It is defined under the active link function but it keeps failing.

    • @munbee_
      @munbee_ 6 лет назад

      There are 2 version of jQuery
      Make sure that you have Used it's minified version

  • @rezarahman1782
    @rezarahman1782 2 года назад

    Hey Kevin. Can you do this using Javascript?

  • @benarsoneliesergio8771
    @benarsoneliesergio8771 6 лет назад

    Your tuto is really good an clear but i it is not working for me. So can you start it again from HTML and Jquery, Thanks in advance

  • @chandarababup3876
    @chandarababup3876 6 лет назад

    thank your sir very useful i have learn about it

  • @romarta.3546
    @romarta.3546 6 лет назад

    Hi Kevin. Thanks for the fantastic tutorial. I would just want to ask as how to disable smooth scrolling on small screen size or how to make it responsive? :) Thanks much

    • @KevinPowell
      @KevinPowell  6 лет назад +1

      Sorry for the late reply. Modernizr might be a good choice because you can have it detect if it's a touch device or not, but if you want to do it a bit like a media query, you could use something like this:
      if (window.innerWidth > 760) {
      //put code here
      }

  • @vincesanchez7790
    @vincesanchez7790 4 года назад

    Can i use jquery for animation but on the other side im using react js

  • @krzysztofziolkowski5705
    @krzysztofziolkowski5705 7 лет назад

    great tutorial, thank you

  • @JEK5190
    @JEK5190 6 лет назад

    Great tutorial Kevin! Works fine but I have difficulties adjusting the top value of 50px for smooth scrolling as I have a fixed navigation bar, could you help me please? thanks man

    • @KevinPowell
      @KevinPowell  6 лет назад

      What's the issue Jarick? The navbar is covering some content? Changing he ...offset().top - 20 to minus the value you need should fix it, I think.

  • @berliandro
    @berliandro 6 лет назад +1

    I have a problem
    everything in this video is working fine for me, except the class which is active is the attribute instead of my attributes.
    because i use attribute for my nav bar.
    so the work properly, but I don't use for the link and the active style.
    can you please help me?
    I'm pretty sure I have to change the *parent* to something else on:
    $(this).().addClass('active');
    $(this).().siblings().removeClass('active');
    sorry for my horrible grammar

    • @berliandro
      @berliandro 6 лет назад

      this is my navbar
      *Home*

    • @KevinPowell
      @KevinPowell  6 лет назад

      To add the class, $(this).addClass('active'); should work.
      To remove it is more complicated, as we need to get the parent, then the siblings, then back inside to the children, so...
      $(this).parent().siblings().children().removeClass('active') - I think.

  • @3deste233
    @3deste233 5 лет назад

    Whenever I try the code at 9:13, it says `Cannot read property 'top' of undefined` -- I looked at stack overflow, but all they say is to make sure the HTML has loaded. By using the .ready method, I think that waits for everything to load on the DOM. I'm sure what the issue is here.

    • @KevinPowell
      @KevinPowell  5 лет назад

      hrm... without seeing your code it's hard to say for sure what might be causing that problem :\

    • @3deste233
      @3deste233 5 лет назад

      @@KevinPowell I ended up using the event.target.hash, to select the href. I found it odd myself. I don't know what it was that I did different other than using the meyer Web reset.css. but thanks for replying. And it was a great tutorial!

  • @ashleygonzalez9975
    @ashleygonzalez9975 7 лет назад

    What's some common troubleshooting that someone might experience doing this, I linked jquery locally and added the correct selectors to my sections but no matter what it always reverts back to default behavior any suggestions?

    • @KevinPowell
      @KevinPowell  7 лет назад

      You could put a console.log("test") as the first thing if your function, and check the console, when you click, the word test should appear. If it doesn't, it's not looking at the right thing. If you put all your code in a codepen or jsfiddle I could check it out.

  • @vatsaljoshi4390
    @vatsaljoshi4390 6 лет назад

    hey may be the concept of event bubling taking place there i think there is no need to say a.Parent as it automatically bubbled to its parent by default????

    • @KevinPowell
      @KevinPowell  6 лет назад

      It's been a long time since I created it, but looking at my finished code, the only place I reference the parent is where I'm adding and removing classes, in which case, I do believe I need to target the parent...

  • @MattTravisMedia
    @MattTravisMedia 5 лет назад

    preventDefault is not working. Any thoughts on why that might be?

  • @TheZUB95
    @TheZUB95 4 года назад

    someone fix problem with .scroll(function() offset().top undefined ?

  • @sujal.paudel
    @sujal.paudel 5 лет назад

    Amazing, thanks a lot.

  • @tronija
    @tronija 5 лет назад

    Superb Sir

  • @JohnHenryGaspay
    @JohnHenryGaspay 6 лет назад

    Hi Kevin I have question would this works on dynamic site such as Wordpress? or is there plugin that may work on scrolling effect with the highlight?

    • @KevinPowell
      @KevinPowell  6 лет назад

      There might be a way to get it to work with WordPress, but a plugin would probably be your best option. Sadly, I'm not familiar with any, but if you did a search for Parallax, I'm sure there must be some which would work well.

  • @incodewetrust8862
    @incodewetrust8862 6 лет назад

    how to make i dive to come up smoothly when scrolling ?? like a slide show but vertically,

    • @KevinPowell
      @KevinPowell  6 лет назад

      I'm guessing you mean something like this? (scroll past the white background). If so, the easiest way is to use that jQuery plugin :P.

  • @rhrobin1724
    @rhrobin1724 3 года назад

    it's really helpful

  • @mauricio231
    @mauricio231 5 лет назад

    Life Saver, thanks!

  • @oliviaxavier8378
    @oliviaxavier8378 6 лет назад

    hi how do i put the nav bar on all the pages? right now its only at the top thanks in advance!

    • @KevinPowell
      @KevinPowell  6 лет назад

      Do you mean for it to stay with the page as it scrolls down?

  • @kristiabermoy593
    @kristiabermoy593 2 года назад

    thank you!! :D

  • @FrootNinja
    @FrootNinja 5 лет назад

    subtracting the offset makes the page jump
    i recommend in the css change the padding
    #aboutme{
    color: #DDD8CA;
    padding-top: 45px;
    margin-top: -45px;
    }
    ^like this^

    • @KevinPowell
      @KevinPowell  5 лет назад

      When does the page jump?

    • @FrootNinja
      @FrootNinja 5 лет назад

      @@KevinPowell disregard, it was my own doing, Sorry Kevin! But what happened was top()-50 made it jump for some odd reason. Still figuring it out.

  • @ARTICFR0ST
    @ARTICFR0ST 7 лет назад

    Yet another great video Kevin; only needed the first part but still watched it all (the more you know haha); also one quick question. Is it possible to make the scroll to the when it hits a color? For example, I am trying to make a one page website, each section (i.e home, about, contact, etc) is a different background color. Is it possible to make the scroll stop right when the background color selected begins? Right now it does go to where I want to but it passes the background color a bit.

    • @KevinPowell
      @KevinPowell  7 лет назад +1

      After the offset().top, you can add - NUMBER + "UNIT" - I'm guessing it's related to the padding of your background?? If so, we want it to scroll all the way down, minus that amount of space.
      So something like offset().top - 150 + "px" or offset().top - 3 + "em"
      Let me know if it works out!

    • @ARTICFR0ST
      @ARTICFR0ST 7 лет назад

      You sir, are a genius. A million thanks!

    • @KevinPowell
      @KevinPowell  7 лет назад

      No problem at all, glad I could help :)

    • @KevinPowell
      @KevinPowell  7 лет назад

      I'm not sure if you edited the Pen since you made the comment, but I'm not really sure what the problem is!

    • @KevinPowell
      @KevinPowell  7 лет назад +1

      Both the h4 and div.bar-gray are block level elements, meaning by default nothing can go next to them.
      You could use floats, but I think using flex would be easier. I'd give each skill a parent div.skill and set it to display: flex.

  • @sagittariansage_2271
    @sagittariansage_2271 6 лет назад

    Mine isnt smooth scrolling!? It is still jumping. I looked over the code again and again and it's exactly the same. I'm unsure what the issue is. Please help?

    • @KevinPowell
      @KevinPowell  6 лет назад +1

      The only thing I can think of off the top of my head is that you haven't linked to jQuery or the jQuery UI. They aren't in my CodePen because they do it behind the scenes on there. You'd want a script tag linking to both, you can find the links to them here: code.jquery.com/

  • @rooki311
    @rooki311 6 лет назад

    Realy thank you for that was realy good

    • @KevinPowell
      @KevinPowell  6 лет назад

      No problem, glad you liked it :D

  • @eypbal
    @eypbal 7 лет назад

    This is amazing!! Thanks..

    • @KevinPowell
      @KevinPowell  7 лет назад

      No problem, glad you liked it!

  • @jovylouverzano
    @jovylouverzano 5 лет назад

    YOU ARE A BLESSING, THANK YOU SIR. SUBSCRIBED

  • @solveigarteaga5910
    @solveigarteaga5910 5 лет назад

    Thanks, amazing!!

  • @nishantrana7018
    @nishantrana7018 6 лет назад

    What about if we have another page and return from that page and do we have the same effect on the both pages when it loads thank in advance if you do that

    • @KevinPowell
      @KevinPowell  6 лет назад

      Do you want it to scroll down to a location when you change pages?

    • @nishantrana7018
      @nishantrana7018 6 лет назад

      Yes and when i return on the same page it will scroll as well on that position

  • @idontwantmynameinhere
    @idontwantmynameinhere 6 лет назад

    For some reason my class doesn't add colours? The code works, because it does log the class on the right element and I see changes when I add a different height and padding in the active class, but background color and color are not changing.. Ideas?
    *EDIT*
    I solved it by targeting the a tag instead of the li (.active a { ... } instead of .active { ... } ).

    • @KevinPowell
      @KevinPowell  6 лет назад +1

      Ah yes, that would do it. those pesky `a` tags. I've been doing this forever and still do things like that all the time.

    • @idontwantmynameinhere
      @idontwantmynameinhere 6 лет назад

      @@KevinPowell So do I, I started with web development 4 years ago and I still make the most stupid mistakes lol

    • @KevinPowell
      @KevinPowell  6 лет назад

      They're also the hardest ones to spot, so not only are they stupid, they take forever to troubleshoot

  • @ryancooper6020
    @ryancooper6020 6 лет назад

    how can we set the colorof the active link? suppose i want to set the active link color to red. where should I define the code?

    • @KevinPowell
      @KevinPowell  6 лет назад

      Since I used Bootstrap to set this one up, you'd have to write the following:
      .navbar-inverse .navbar-nav .active>.nav-link { color: red; }

    • @ryancooper6020
      @ryancooper6020 6 лет назад

      Thanks a lot.. It worked.. :)

    • @KevinPowell
      @KevinPowell  6 лет назад

      Awesome :)

  • @zerefdev
    @zerefdev 6 лет назад

    Thank you sir,
    Liked and subbed

    • @KevinPowell
      @KevinPowell  6 лет назад +1

      Awesome, thanks for the sub!

  • @JaisalKothari
    @JaisalKothari 6 лет назад

    It is saying unexpected end of input for me. What do I do?

    • @KevinPowell
      @KevinPowell  6 лет назад

      Where is it saying that Jaisal?

  • @blueminch9810
    @blueminch9810 4 года назад

    main.js:19 Uncaught TypeError: Cannot read property 'top' of undefined having this error

    • @lukas1us
      @lukas1us 4 года назад +1

      Try
      $($(this).attr("href")).offset().top
      instead of
      $(this.hash).offset().top
      Worked for me.

  • @sagard905
    @sagard905 5 лет назад +5

    U cud just add the following code in css just for SMooth Scrolling:
    html {
    scroll-behavior: smooth;
    }

    • @KevinPowell
      @KevinPowell  5 лет назад +1

      I wrote a blog post on this not too long ago, and I'll probably make a five-minute friday for it too :)

    • @arshiemocti4215
      @arshiemocti4215 5 лет назад

      OHMYGOD THANK YOU SO MUCH! This is the only method that worked for me.

    • @jeanbraithwaite4372
      @jeanbraithwaite4372 5 лет назад +4

      It's great for Chrome and Firefox, but according to caniuse.com, this won't work with MS Edge, or iOS Safari, among others

  • @tabrezrahi
    @tabrezrahi 6 лет назад

    nice video thanks for making these video's

    • @KevinPowell
      @KevinPowell  6 лет назад

      No problem at all, so glad you liked it 👍

  • @Manojmishra154
    @Manojmishra154 4 года назад

    Thank u sir

  • @incodewetrust8862
    @incodewetrust8862 6 лет назад

    do you guys if kind of this paage a sngle product page with scroll using javascript or jquerry has effect on SEO ??

    • @KevinPowell
      @KevinPowell  6 лет назад +1

      The scrolling effect should have no impact on SEO.

    • @incodewetrust8862
      @incodewetrust8862 6 лет назад

      thank you Kevin i'm actually trying to use your tutorial into prestashop until now it is not working i will find a way thank you for this amazing tutorial

    • @KevinPowell
      @KevinPowell  6 лет назад

      I've never used prestashop, so I'm not sure why it isn't working... I wish I could help more. Just make sure you are linking to jQuery, or it won't work!

    • @incodewetrust8862
      @incodewetrust8862 6 лет назад

      thanks i'll find a way to do with it ! thank for all

  • @limaakter3797
    @limaakter3797 5 лет назад

    it awesome..... thank you

  • @SamFrysteen
    @SamFrysteen 6 лет назад

    Wouldn’t your problem at the end where you added “- 20” be better solved by taking the height of the sticky nav bar off instead... same with scrollTo - your scrolls keep heading under the Mac bar instead of stopping at the nav bar bottom.
    Something like that anyway 😁

    • @KevinPowell
      @KevinPowell  6 лет назад

      For sure. If I were to do this today I'd probably approach it a bit differently, but that's why this stuff is so fun, right? Always learning and improving

  • @marcfriedmann6009
    @marcfriedmann6009 6 лет назад

    Hey guys, i added that code to my one pager and it was first working awesome, but meanwhile i discovered, that it wont work on some mobile devices. For example it works fine on my iPhone 5s, but doesnt work on my wife's iPhone 7. Did anyone have the same issue? If yes, whats the solution? Thanks in advance....

    • @KevinPowell
      @KevinPowell  6 лет назад +1

      There could be something disabling on the phone to improve performance. In general, it isn't a bad thing to turn off on mobile anyway, as it can cause some performance issues, especially on more budget phones.

    • @marcfriedmann6009
      @marcfriedmann6009 6 лет назад

      Kevin Powell Hey Kevin, thanx for your quick reply, i really appreciate it. Also loved your tutorial, its perfectly understandable, even for a noob like me. 😊 i meanwhile could solve the problem by adding js gentle anchors for iphone. Keep up the good work, im already looking forward to watch some more of your stuff. Cheers.

  • @LodPod
    @LodPod 4 года назад

    Page should scroll until just below the header, not all the way top I mean underneath the header, but no body seems to care 😁

  • @rasel309
    @rasel309 6 лет назад +2

    what the. hash do. can anyone help please?

    • @KevinPowell
      @KevinPowell  6 лет назад +4

      It gets the location of the hash (#) on the page, since we're using IDs, it finds the location of the ID on the page. There is a nice explanation here - stackoverflow.com/questions/32772363/how-does-this-hash-work

  • @isurubandara8987
    @isurubandara8987 5 лет назад

    great one

  • @gaarashippuden999
    @gaarashippuden999 6 лет назад

    Can I do something like that with just JavaScript?

    • @KevinPowell
      @KevinPowell  6 лет назад

      Yes! If I were to make this today, I'd do it with regular JS instead of jQuery. It could be a nice exercise to follow along, but code it without the jQuery :)

  • @davidsekielyk9213
    @davidsekielyk9213 6 лет назад

    I have a problem similar to God Pepe
    my nav has the following
    TEST1
    TEST2
    TEST3
    but when i do the scroll if i add the line of $(this).parent().siblings().removeClass("active"); do not change the items
    using console.log($(this).parent().siblings()) always this is a #test1, so the active always keeps him first, that is, it never changes the $(this) and i do not know why.
    I can not think of another way to replace the siblings.
    Please Help

    • @KevinPowell
      @KevinPowell  6 лет назад

      Do you have your code in a codepen or jsfiddle by any chance?

  • @bayusetyawan3086
    @bayusetyawan3086 5 лет назад

    Could you explain why you should put - 20 to debug it?

    • @KevinPowell
      @KevinPowell  5 лет назад

      It was a bit of a magic number in this case, just to get it to line up where I wanted. Not exactly best practice 😕

    • @bayusetyawan3086
      @bayusetyawan3086 5 лет назад

      Ok thanks to reply. I just really new in Jquery so thanks again :)

  • @djamparo6636
    @djamparo6636 7 лет назад

    If you have the error that it cant read top of property undefined. Then you can alternitivly use this bit of code:
    var sectionOffset = 0;
    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
    if (target.length){
    sectionOffset = target.offset().top;
    }

    • @franzurdaddy
      @franzurdaddy 6 лет назад

      what do i put in the '[name' ?

    • @djamparo6636
      @djamparo6636 6 лет назад

      franzurdaddy nothing, it refers to its array, and gets the name back.

    • @franzurdaddy
      @franzurdaddy 6 лет назад

      Dj Ace74 thanks man but it didnt work for me i put the scroll class in and it worked

    • @franzurdaddy
      @franzurdaddy 6 лет назад

      And left the ']' empty otherwise it wouldnt work its really weird but it worked

    • @djamparo6636
      @djamparo6636 6 лет назад

      franzurdaddy im glaf it worked for you, i struggled too. Have a nice coding time

  • @samirah.8904
    @samirah.8904 6 лет назад

    Which software do you use?

    • @KevinPowell
      @KevinPowell  6 лет назад

      I write my code in VS Code these days.

  • @Danroberts1984
    @Danroberts1984 5 лет назад

    Hi thanks for the video. I've run into a problem though, I keep getting an error in my console:
    Uncaught TypeError: Cannot read property 'top' of undefined
    It seems to be referring to this line:
    scrollTop: $(this.hash).offset().top
    Does anyone know how to fix this?
    Thanks in advance guys

    • @Jake-vi3hg
      @Jake-vi3hg 5 лет назад

      If you're using arrow functions I don't think it'll work.

    • @yc-codes
      @yc-codes 5 лет назад

      same here