开发者

Hold website position when navigating

开发者 https://www.devze.com 2022-12-18 14:26 出处:网络
Is there a way to make it so the page doesn\'t shoot to the top of the site when clicking different links in the navigation bar?

Is there a way to make it so the page doesn't shoot to the top of the site when clicking different links in the navigation bar?

e. So say I'm browsing my site and I'm scrolled down a little bit. Then I click on a link that navigates to a different page on my site. It automatically scrolls to the top. Is there a way to make it not do 开发者_StackOverflow社区that.


instead of simply linking to a page, you could link to an anchor on that page using

<a href="pagename.html#anchor">link text</a>

if that anchor is placed properly on the target page, you will not experience the jump back to top every time you link to another page. hope this helps


If this is the problem I'm picturing:

Change your links to point to <a href="#"> or <href="javascript:void(0);">

If you're going to different pages, you can use a link like:

<a href="page2.html#Section5">My Link</a>

Down in the page:

<div id="Section5">
 Stuff!
</div>


This is the way that the web works. But still you can do a few work a rounds but each one will take a little work.

First option: When you click on any link on the page, get the margin of the link from the top, then add it as a parameter to this link, and only then do the navigation. (the format of the line will be like page.html#margin-from-top).
Then in the new loaded page, you can look for this value and do the scroll. (I prefer the scrolling with a little duration).

Second option: Another idea is to stay always on the same page and only change the content of it. you can do that with a little effects too.


It seems, too, like you might want to use a mooTools ScrollTo affect or possibly even invoke an AJAX method like SWFAddress.

Depending on exactly what you're trying to do, you may be able to accomplish it without using any fancy javascript, but it will depend on the inclusion of labels/etc. on your target page (as has been mentioned before).

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号