I've been looking but I couldn't find an answer/solution so far, so I hope that someone here is able to answer me and guide me to an solution if this is possible.
I'm trying to achieve the result seen in the second example of this page: https://docs.angularjs.org/api/ng/service/$anchorScroll , but instead of clicking in links I need to be able to use the mouse scroll to navigate between anchors, i.e., if I scroll down I move one anchor down and if I scroll up I move one anchor up.
How can this be achieved?
Thanks in advance!
I think this may help you in achieving your requirement angular-scroll.
You can also use Bootstrap scrollspy.
Related
I am using bootstrap select plugin to generate custom dropdowns in one of my projects but I am stuck in a very critical issue. The dropdown list is big and when dropdown is opened the screen moves/scrolls toward bottom a bit so that first few options can't be seen.
Issue can be seen here in this video:
https://drive.google.com/file/d/1SWQVvfOgO0-iLy0KjIf3sPEANKu8Nkpv/view
And if you want to play around please check here the color filter:
https://www.stylorita.com/new1/outfit-ideas.php
Important: I can not use the max-height or add a scrollbar to it for fixing, I must display it without scrollbar. Please anyone can help?
If I understand you correctly, the solution is for whatever reasons NOT a scrollbar, but you want the first entries of your dropdown list to stay in view, right?
Maybe JS scrollIntoView() may help: If you have the chance to apply a class to your first list entry, you could use scrollIntoView when the list opens (which is normally the case at getting the focus or on click).
You can find a short description of scrollIntoView on this page: https://www.w3schools.com/jsref/met_element_scrollintoview.asp
Is there a way to make a link that will scroll the visited page, say, 600 pixels from the top or the bottom?
And I'm not thinking about scrolling to an anchor...
I want to make a link about device support for iOS and the best results are on this page: https://www.apple.com/augmented-reality/
but the part about the device support is at the same bottom and there is no proper anhora or ID tag to scroll to.
So, wouldn't it be great if I could write, for example:
href="https://www.apple.com/augmented-reality#bottom&600" or something to scroll to 600px from the bottom edge? Does anyone know if it can be done?
Maybe Chrome's feature "Scroll to text fragment" could help for this.
Just add #:~:text={text} to the url, where {text} is some text that should be highlighted and scrolled to.
In your example, this could look like this:
https://www.apple.com/augmented-reality/#:~:text=Snapchat
I don't know if this always works reliably, but it's the only way I can think of at the moment.
Edit: I just realized that the link doesn't work as expected on first try but when reloading...
Firstly i must say i am a complete novice in programming! That said, i need some help regarding an issue that seems for me impossible to solve.
What i need is a menu that on a single page remains fixed in the same position, (i'm not that sure but the idea is similar to a sticky menu that wouldn't be at the top) from which it's possible to scroll down to each page section with an anchorlink. I tried to use "scroll to page id" but sometimes it gets stuck, or doesn't even scroll down and worst of all, once the page scrolls the menu is gone. image for reference.
I've been looking for days through plugins, stickymenus and other stuff but still haven't found the right solution. Any suggestions?
You can define your areas as sections instead of "page ids". After that is simple to navigate through those.
The Bootstrap Scrollspy is a nice way to do that simple: Bootstrap Scrollspy example
I'm doing the Free Code Camp thing and the first Zipline challenge is to replicate the following webpage on Code Pen. What I'm looking for is a hint or two in the right direction so I can get the pictures to scroll like they do on the webpage. I don't want the answer(s), just a hint or hints in the right direction so that I can do my own work. I think I'm suppose to use CSS, and if that's the case I have no idea which property/properties to use, maybe one of the background properties?
And the hint I was looking for is 'css parallax scrolling'. Thanks for all the help.
I am trying to create an animated menu bar, in which the background block moves from the current selection to the latest one. For an example, have a look at http://www.creative-jar.com/. I would like to accomplish this in the simplest possible manner (perhaps using only HTML and CSS). Any help will be really appreciated.
As I am new to web development, thoughts on whether this sort of animation is a good or bad idea are also welcome.
There's a jQuery plugin that does exactly what you describe: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/