navigation to new page doesnot scroll top - javascript

There are few links on a page, when the user clicks on a link it should redirect to the new page, As of now it is redirecting to the new page but the issue is that the new page doesnot scroll to top and it stays at the same location where the user clicked the link on the old page. The new page scrolls to top only when the page is refreshed. How to solve this issue?

if you using ng-view to show your navigate page then can try using autoscroll="true"
<div ng-view="" autoscroll="true"></div>

Add an id to one of the top elements of the page. For example:
<div id="mytopdiv"></div>
And then you can add "#mytopdiv" to the end of the url for redirecting. For example: "http://www.mypage.com#mytopdiv"

Related

Scroll to div on another page in React

I'm doing a React project and I want to redirect to #categories div on main page...when I click on a link on navbar of the main page (where #categories div is) it works, but when I click on that link on another page (categories div is on another page and it should redirect me to localhost:3000/#categories), the href is good but it only redirects me to that page, not to categories div on the page.
I have tried writing a function to do it and also checked if the div name (id) is correct, checked if link works and everything.
Does anyone know how to solve this?
Thank you.
You cannot redirect to a div instead use section tag
<section id="categories">
<div></div>
</section>
Now the same localhost:3000/#categories href would work. Read More

Manipulating page bookmark position

I'm using Bootstrap to create a single page portfolio, I'm using bookmark links to navigate the page, however I want the page to land earlier than the position it lands on, I am pointing to the div I assigned the Id to it. is there anyway to do it?
Let's say, you want to go to footer on click of Goto Footer link
Goto Footer
Then, the footer block should have
<div id="footer-block">Page Footer</div>

Page Redirect but show section of target page

Is this possible without JS?
I have a menu item which links to a to a section of the home page.
<a class="menu-item-link one-page-nav-item" href="#payments">Payment Options</a>
Of course this works only for the page where the id is present in the DOM. Can I change the link so that it will work from another page without JS on the target page for scrolling. That is the link opens new page and scrolls to the section.
I tried this but it does not work.
<a class="menu-item-link one-page-nav-item" href="http://myurl.com#payments">Payment Options</a>
All examples I am finding refer to linking to a page section on the current page.
Thanks!

Call JavaScript from external link

I am trying to create a horizontal parallax site. Everything is working nicely, when I click the menu the slides move swiftly to the horizontal direction and the corresponding slide is displayed.
I have an external HTML page, that has the same structure as the main site and the problem is that when I click this page's menu, it goes to the site but lands on the first slide.
I want a script so that when I click on this external HTML page link, the page should land on the site, but then it should slide to the corresponding slide.
Main menu link looks like this:
<a onclick="HORIZONTAL.ANIM.instance.move(3);" id="sec4" href="javascript:void(0);">About Us</a>
I want to click on About Us link on external page and then it should land on the main site and then the above script should run and slide should move.
First refer user to new page ( for example http://newpage.com" )with slide id in hash.
About Us
in that new page create a script after page loads that slides to specified slide passed.
window.onload = function() {
var id = window.location.hash.substr(1);//get id from url after hash
HORIZONTAL.ANIM.instance.move(id);
};

How to refresh a home page or go to the home page with one link?

Alright so here's my dilemma, I have a refresh link on my blog that refreshes the current page you're on. I want the link to, if you're on the homepage (/) to refresh and if you're on a different page, say /tagged/me to go to the homepage / the current html I have for the links section is:
<div id="linkz">
refresh
- fask
- face
- more</div>
p.s. my blog is here and the links are in the sidebar.
I'm not exactly sure if this is what your question is asking but if you want to go to the home page, just set the link to
Home Page
On every single page. No need for Javascript, just straight up HTML.
if you simply want the link to refresh to the homepage, why not just href it to the homepage? Just make it href="/".

Categories