I'm not that into Javascript but I think this could be achieved easily.
I've got a link on my page that sets a parameter (with PHP). That parameter is used to get how much posts to show. This works like a charm.
But now I want to scroll to the postition where the user clicked the link after the page reloads with the parameters. So the users doesn't have to scroll through the posts he already saw.
So here are the steps:
User clicks link to load more posts
Site gets reloaded with parameter (e.g. domain.com/?numberofposts=10)
Now the Site should scroll to the position the users was when he clicked the link
I was trying to achieve that with scrollTo etc but I cant get it working. My thaughts were to pass the scrollposition as an other parameter maybe?
Do someone know how to solve this? Thank you :)
By including an anchor tag within a post or page, you can place links in the body of your post which when clicked allow the reader to jump to another location on the page.
The anchor tag will consist of two HTML elements. First, you'll want to create the link.
If you are linking to a spot on the same page, the format of the link will be similar to:
Link Text
For example, if the text is "Read more about raptors!" then your HTML should look like this:
Read more about raptors!
The above anchor link only works when you are jumping to a specified spot on the same webpage. If you want a link to jump a specific location on a different page, you'll need to replace #anchor with the full URL for the page, similar to:
Link Text
The second part of an anchor tag is the actual anchor. The anchor should be placed at the beginning of the line where you want to start reading after you jump similar to:
<a name="anchor"></a>
Following our previous example, the anchor code will be:
<a name="raptors"></a>
Full tutorial here
You need to know where you have to scroll to.
So yes, you do need to store the scrollposition somewhere (or pass it as a parameter).
Related
So basically I want to create an href like this <a href="https://www.some-website-i-do-not-own.com >Go to link and jump to class</a> and it will link out to an external site that I do not own but I know on the bottom of that page there is a div with a class that I found in the DOM linking to an article. I want to not only redirect to this page but automatically have the browser scroll to that Y position for that div's class.
Again I do not have access to any of their code I found this class throguh the DOM, is this possible ?
it's usually done by adding
#id-of-element-to-scroll-to
to the end of the URL
take that for example
https://www.wikiwand.com/en/Stack_Overflow#Statistics
will redirect you to their page, and scroll to the element with id="Statistics"
It is possible to go to a website's page specific location with IDs. If you know the ID of an element, located where you want to jump to, you just add it at the end of the URL like this:
<a href="https://www.some-website-i-do-not-own.com**#bottom**>Go to link and jump to class</a>
The ID is being started with a # and then the name of the element's id.
If I helped you, you can approve the question as a solution.
Have a nice day ;)
So in short, I have this page I created on a wordpress site. The issue, the content on the page, divided in different rows, is quite large and I wanted to enable on the beguinning of the page a jump to section link (and jump back to top link) for each section (in this case, row).
I'm in doubt, though, on what is the best way to do this on wordpress and wether I shoudl add an even type like scroll to or jump to. Also, I want to create a function that does this to multiple sections... in order to have a neat and simple code, is there any function(s) options you could recomment me to search and try to use?
thank you =)
The easiest way you can create a link to "jump to" a section of the page is with anchor links. This page has an example:
https://www.rapidtables.com/web/html/link/html-anchor-link.html
Notice that the browser URL gets updated when you click the anchor link, this is how you can share links to specific sections of your page.
How to create anchor links in Wordpress (Visual Edit Mode):
Begin by adding the anchor tag. This will go on the section header that you want to jump to (ie, the destination of the link). In Wordpress Visual Edit mode, on the right-hand side of the screen you should see an Advanced section. In the "HTML Anchor" field, add your tag. Use dashes (-) instead of spaces. Here's an example: my-section
Now create the link to the tag. Highlight the text that will link to the anchor tag. Click the "link" button in the toolbar and add the anchor tag with a pound symbol (#) in front of it. Example: #my-section
Save and publish. Now when you click the link you created in step 2, it should jump you to the section you tagged in Step 1.
For more detailed instructions, please see the Wordpress.com guide:
https://wordpress.com/support/splitting-content/page-jumps/
So I have this page which has 3-4 anchors and whenever I click the button to jump to the section I want, the url should remain the same (without adding #anchor).
I googled this but I couldn't find anything that works and I'm still learning JS so I don't have the knowledge to do this.
Not sure what you mean, Perhaps you can edit your question to show us what you have already tried. Anchors are how the browser knows where to scroll to, if you want to achieve the same thing but without changing the anchor in the address bar you can try something like this on click:
elmnt.scrollIntoView();
See also: https://www.w3schools.com/jsref/met_element_scrollintoview.asp
I am trying to get one last thing working:
I have a blog link in the main navigation and when you click it, it scrolls down to the blog. But when I'm on any other page, this logic obviously doesn't work. It should first consequently first go to the root page and then scroll. I've got the opposite thing working here, but haven't quite gotten this task done yet.
Any help?
I am using scrollTo successfully like this:
$(".scroll_to_top").click(function() {$.scrollTo($("body").position().top, 300)});
The blog part however is not yet reacting:
if(window.location.hash === 'blog') {
$.scrollTo($("#blog").position().top, 300);
}
What am I doing wrong?
You could use a basic hash (#) at the end of the URL to automatically scroll the the element with the id specified in the hash (i.e. http://example.com#blog). That would be the simplest solution, with no need for Javascript.
If, however, the element you want to scroll to doesn't have an id that you can use (and you can't modify the HTML so that it does), or you want to animate the scroll rather than just jumping the the element in question, you could still use a hash in the URL and do something like the following:
//URL is http://example.com#blog
if(window.location.hash === 'blog'){
//scroll
}
Finally, if you really hate the idea of putting a hash in the URL for some reason, you could intercept the click on the <a>, create a cookie, redirect to the desired page, and then have that page check for the existence of the cookie.
I have the following link:
Section
Now I really want this link to be working so the url will be changed to
mypage.html#section
But than on the other hand, if I just keep the code as it is, the browser would scroll the page back to the top automatically, and I don't want that to happen.
Obviously return false; will not suffice because it will not change the url.
Any ideas?
(Thanks)
You are attempting to click an anchor that ties to a hash. Which is going to attempt to jump to the the appropriate element with that name. If it does not find that name it will just end up at the top. This is normal behavior.
It seems like you want to change that, from which I recommend not using and anchor and adding the #section hash via JavaScript:
Section
That should give you your desired result.