I have seen on some landing pages on some websites that when you scroll down it jumps to the content regardless of how much you scrolled.
How would that be achievable with HTML/CSS/Javascript?
Thanks.
You should make in html id's to specified links, like that:
<a id="example1" href="#">TEST link1</a>
now in javascript you should get the position of this link by locating with DOM.
Here you can read about it: https://www.w3schools.com/jsref/dom_obj_all.asp
On 'scroll' event you can provide this on link position.
Related
I've recently started learning html and CSS. I have no knowledge of javascript, but I will learn soon. I want to know how to use a link on a page to scroll the page down to another portion of the same page in an animated fashion. For instance if the page has 2 parts, a "home" and an "about me" part, I want a link that will scroll the page down to the about me part from the home part. Is it possible to do this without javascript?
For the section you want to jump to, like the "about me" section, what you do is you create an anchor tag and you give it an id and then in your link, you set the link href source to the id of the anchor tag. This will make your link, when clicked, jump to the section that has the matching ID. Now this will jump you to the section, not necessarily animate it in a scrolling fashion.
Example:
link:
About Me
About me section
<a id="about_me">About Me section</a>
You could even leave the anchor tag blank and the link will still jump to that section like so:
<a id="about_me"></a>
I have an <a> tag in an <li> as a button in the header of my application which is responsive. However, when I scroll down to mobile sizes, the <a> tag no longer functions.
Here is a link to the site.
The <a> tag that I am referencing is the "Get Started" item. I have no idea why it would stop working on resize. Can anyone help me with this? It would be much appreciated.
Add position: relative property to your button.
hi guys can any one have idea whenever i click from footer link a new page will be open and the will scroll to a specific content below is the screen shot. Condition is the website is in yii framework and nothing others.
You can create an anchor in your HTML with <a id="some-content"></a> and change the location to some/action#some-content.
using <a> you can create that functionality
<a id="travel">Travel Privileges</a>
and try to add #travel in the location bar
Ex:
http://somedomain/privileges#travel
Recently I came across a site that had an interesting effect, I can't remember which site it was. The effect is that on navigation click, the entire current page fly away to the top-right corner and disappear, and the new page flys in from the bottom-left and occupy the browser window.
Does anyone know where I can obtain a example code of this effect? Thanks.
Try this
effects
Instead of divs you can do this for your whole page (body element).
First you have to define a class for all links () tags. When the user clicks any link you can call the effect for the whole page.(i.e first on the current page and then when the new page loads you again call the effect)
that's called single/one page theme. see this demo:
http://themeforest.net/item/stratum-html-single-page-template/full_screen_preview/1668778
http://themeforest.net/item/volemo-html-one-page-template/full_screen_preview/1359429
try jquery .scroll()
the key concept is you create a single large page (eg. height: 2500px) then assign anchor-link scroll to fix position.
You can acheive Similar effect on normal site by doing the following to the main body tag
add a click event on the navigation links which uses jQuery effects to slide your page out fast
add an onload($(document).ready();) event to all the pages which slides in the body as you want
What is the JavaScript to scroll to the top when a button/link/etc. is clicked?
Top
If you had an anchor link at the top of the page, you could do it with anchors too.
<a name="top"></a>
top
It'll work in browser's with Javascript disabled, but changes the url. :( It also lets you jump to anywhere the name anchor is set.
actually, this works by itself, no need to define it.
top
This is a "magic" hashname value that does not need to be defined in browsers.
Just like this will "reload" the page.
reload