How to use div -ids in url to jump to specific post...Is trailing slash the culprit?

Question

Some links on my site take the user to a specific post in context on a category page.

On non-WP sites, this is easily accomplished by including #example-div-id in the url like this:

http://www.example.com#example-div-id

But in a WP environment, this url isn't working:

http://www.example.com/?cat=15#post-170

This (incorrectly) jumps the browser window to the end of the page.

But this does work...manually removing the trailing slash after page load and reloading the page. The browser window jumps to the appropriate div, or post.

http://www.example.com?cat=15#post-170.

Does anyone know why this is? Or how to get WP to eliminate the trailing slash? Is it safe to eliminate the trailing slash?

Update

I tried using EAMann's solution below, implementing pretty permalinks to facilitate the anchor jump. The results achieved completely break my post order and exclusion of child categories. My navigation is category based. I don't use pages, but use category names in the navigation. Each 'page' is really a category archive showing posts from the category. What I've read about permalinks starting with %category% leads me to avoiding permalinks all together. I certainly don't want to start the permalink with the year or post id either. It doesn't make sense on my site.

http://www.example.com/category/my-category looks more professional and "normal" than http://www.example.com/2009/my-category when the intended illusion is that the category names are really pages on this business site.

So I'd appreciate any other explanations why the anchor jumping isn't working.

Update #2

(in response to EAMann's comment directly on the OP) My site is a business website that for the most part displays static content. A few areas have featured portfolio work and there is blog section. The site uses a category based navigation. All the site content is written as posts. Each post is associated with a category that determines where the post is displayed. The site navigation menu is created with wp_list_categories(). Clicking on a category opens a category archive that presents all the posts from the category.

I'm currently using the default permalink structure.
http://www.example.com/?cat=15 shows a category page.

Update #3

After more investigation, it appears that the jQuery plugin "innerfade" that I'm using to display a slideshow at the top of the page is the culprit. It has nothing to do with the trailing slash. Sorry to go down the wrong path.

If I comment out the php that includes the plugin js file, and the anchor jump works just fine. I would guess that some javascript manipulation of the page content is screwing up the jump. I've worked around the problem using $(window).scrollTo();.

I appreciate everyone's time.

Answer 1

First, I'd recommend using "pretty permalinks" over the default query-string structure. This will eliminate most of your problems from the getgo. It will turn your http://www.example.com/?cat=15#post-170 urls into http://www.example.com/category/category-slug/#post-170 and the browser will move correctly to the post's position in the page.

That said ... Yes, you can remove the trailing slash. The trick is to add a rule to your .htaccess file:

#remove trailing slashes
RewriteCond %{HTTP_HOST} ^(www.)?yourdomain\.com$ [NC]
RewriteRule ^(.+)/$ http://%{HTTP_HOST}/$1 [R=301,L]

(This is taken from a Drupal tutorial that does the same thing ...)

Answer 2

As I've stated in updates to my question...other javascript working on the page conflicts with the anchor jump. I implimented more js to work around the conflict. The url almost looks the same as before, but with a parameter name inserted before the pound symbol,

http://www.example.com/?cat=15&hi=#post-170

but I use jQuery-Howto's 'plugin' to get url parameters.

$.extend({
    getUrlVars: function(){
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }

    return vars;
},
getUrlVar: function(name){
            return $.getUrlVars()[name];
        }
});

I retrieve the post number assigned to the 'hi' url parameter and scroll to 20px above the post with the same id.

 //'hi' var used to jump to anchor          
    var hi = $.getUrlVar('hi');

    if  ( hi ) {
        //scroll to link or search results if url var 'hi' is present
        $(window).scrollTop($(hi).position().top-20); 

the jquery plugin code and my custom code above go in my javascript file which is included in header.php