Link to a section of external page without hash '#' (html5 history?)

Question

any advice about possible different methods to link to a section of an external page of the same site without use hash '#'?

I can do that with ease if I'm in a full js/ajax scenario, but searching some ideas if it's possible to use 'cleaner' urls than hashbangs to have a simple scroll to section link...

I need to point to a section of another page, I simply dont want www.site.com#section... — Dee, Aug 08 '14 at 23:17
Your question still seems too broad and not clear... another page = another page of your site OR another domain and #section? Could you explain in detail what you want to achieve by editing your question, please? — Francisco Presencia, Aug 08 '14 at 23:22
Hash is the simplest. It's a standard, understood and common way of leading to a specific section on a page. Why re-invent the wheel? — lesssugar, Aug 08 '14 at 23:25
Also, the question is tagged with JS, so I'm guessing you can use it. If you can then set a CSS scroll position instead of hash. But it is non-standard. — aa333, Aug 08 '14 at 23:29
Simply searching different approach to scroll to a section of a page of the same site without use '#' + fragment and have cleaner URLs... Pass a parameter and remove it once stored? Yes I know it's re-invent the wheel. — Dee, Aug 08 '14 at 23:29

Wigz · Answer 1 · 2014-08-08T23:59:02.267

If I am understanding correctly, you want to do a location change to the new page and then scroll to a given area on the page with a clean URL?

If so, this could be done with a URL Rewrite in .htaccess (or similar config) and a bit of JavaScript to determine where you should be on the page:

.htaccess

For example, this would pass all requests to /otherpage/{section} to otherpage.html (simplified for the purpose of this answer.)

RewriteEngine On
RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(otherpage/.*)$ otherpage.html [L]

JavaScript

And then, on otherpage.html, you could detect the current path and scroll the page accordingly.

switch( location.pathname ) {
    case '/page/section-1/':
        // scroll to section 1
        break;
    case '/page/section-2/':
        // scroll to section 2
        break;
    case '/page/section-2/':
        // scroll to section 2
        break;
}

However, now that you are on the page, if you wanted this scrolling effect to continue without refreshing the page, you would have to look at using HTML5 History pushState. For this, History.js has worked well for me in the past.

Edit: oh, and watch that trailing slash in location.pathname. It may or may not be there, so you may want to sanitize that before comparing.

I've exactly done something like that in a fully ajax WP theme, but today I'm developing a Ghost one (very limited api) so I cannot programmatly access .httaccess saddly. Thank you for time responding! — Dee, Aug 09 '14 at 00:20
That certainly makes it more difficult! Maybe you could use Wordpress routes to push all the requests to a given page instead of .htaccess? — Wigz, Aug 09 '14 at 03:49
I'm not on WP this days, this is for a Ghost theme, I cannot access any routes. — Dee, Aug 09 '14 at 09:06

score -1 · Answer 2 · answered Aug 08 '14 at 23:10

-1

What's a "hashbang"? Do you mean "#"? If so, then it's pretty much THE normal and "clean" way to link to a specific section of a page. That's why it was invented in the first place. Anything else is hackery.

answered Aug 08 '14 at 23:10

Vilx-

104,512
87
279
422

I'm searching different methods if there are... I dont want use the '#' in my urls... If cleaner urls hackery should sound ok – Dee Aug 08 '14 at 23:18
A [hashbang](http://stackoverflow.com/questions/3009380/whats-the-shebang-hashbang-in-facebook-and-new-twitter-urls-for) is a unique identifier for a (typically) Javascript-based router to look for, when determining which page of content to load. – wersimmon Aug 08 '14 at 23:30

Link to a section of external page without hash '#' (html5 history?)

2 Answers2