currently I am creating a website with horizontal scrolling based on Elementor's official video tutorial. and the code they provide in the video description.
Unfortunately they didn't explain how to make the website scroll to anchor IDs. When doing so, either nothing happens or the page scrolls weirdly vertically and then horizontally to the desired section.
Do you have any ideas how to solve this issue? I'm glad for any ideas!
I already tried to add JS code snippets but nothing of it worked :(
Related
Recently I am creating a page with a small menu in the content, just to switch between different content topics. Nearly similar to a small slideshow, just with a simple line navigation above the content with the different topics.
So I am just looking through the web to find some alternative ideas for the typicall hamburger icon for the mobile version, since I am using it already for the main navigation.
I found this:
'http://codepen.io/fbrz/pen/bNdMwZ'
I dont want to use the pull-down function, but I love how the different menuitems appear and come from outside the content area in focus.
So I had the Idea of maybe just using the swipe menu-items, without the pull down function.
So my question is, did anybody of you have found or even created a similar navigation somewhere, and if yes where? I would love to find some more options/ideas?
Thanks as always for your input!
I think this could be something useful for you
Scroll Overflow Menu
I am having a very odd issue and also finding it difficult to implement smooth scrolling on my single page website.
You can view my site HERE
Firstly, Is the strange anchor issue, when I click the link in the hamburger menu, the link appears in my address bar (which I would like to get rid of at some point) but when I scroll down the page it just keep being stuck on that div only I cannot scroll the page freely.
Secondly, I can't seem to implement any smooth scrolling techniques which I find on the net so far and I would really appreciate a little hint as to what I am doing wrong. I have tried to put name="" and rel="" into the <li> and <a> elements (adjusting the smooth scroll code accordingly but still nothing.
Please find reference HERE
I am a bit of a newbie with javascript so maybe i am not doing something simple here.
Thanks in advance!
Terry
After speaking to some other students I found that the issues is due to the html and body CSS. I needed them to both have height auto and min-hight 100%.
Although this still does resolve the issue with the revealOnScroll. I need to tweak this code I think as it isn't able to then calculate the offset().top
I am using fullPage.js on my site and for some reason, the normalScrollElements is not working as I expect it to. I have 5 sections on my site and I need to have normal scrolling for section2 which is Showroom. I used the normalScrollElements on that section and now the problem is that I cannot scroll down to the other sections(Contact, About). I don't know what code to put here, since it's basically normalScrollElements.
Here's a link to my site:
http://sabirmb.com/Parallax
Could anyone please explain to me what I'm doing wrong?
Thanks.
The problem has been fixed. Basically the only thing that I had to add was scrollOverflow:true as explained in the documentation.
For future reference, if you have a section that has more content inside than the screen viewport, you should use scrollOverflow:true and this will allow for the content to scroll in that viewport.
I've seen one or two sites lately that take over the default scrolling in browsers.
When scrolling down, it will animate a scroll down to the next content section (stopping any scroll events during the animation.
When scrolling up, the same thing happens, but to the previous section.
The site I currently have is here: http://cirkut.net/sub/proven/parallax/
I've got the parallax down, but I can't think of an easy way to takeover the scroll and animate this. I'm fairly certain there must be a js/jQuery plugin to do this (I'm currently using stellar.js).
I've been searching for hours to find the example of what I want, but I can't find anything. If I find one, I'll come back and edit this.
Thanks for any leads or help!
I've tried multiple things, including taking out the preventDefaults's and implementing a js that would force touch scrolling but it has all failed. What I am trying to do is keep the blue bar at the top of this page fixed and allow the page to scroll. Eventually I want to add a transition that will only affect the scrollable area but currently I have been trying to figure out why this page won't scroll vertically.
Here is the html:
http://jsbin.com/ocijax
Here is the source:
http://jsbin.com/ocijax/edit#javascript,html
Any help would be greatly appreciated. I just have a really bad feeling the solution has been right in front of my face. Thank you!