How can I make internal anchor links work with WordPress's permalinks?

Question

I've got a custom template page called 'shop', which is found at the URL http://mysite.com/shop/. This page lays out all the posts of post_type 'product' like this:

<div class="product">  
<a name="product-name"></a>
<img src="path/to/image.jpg" />  
<h4>Product name</h4>`  
<p>A description of the product.</p>  
</div>`

On another page, I've got a link like this:

<a href="/shop#product-name">Buy this product!</a>

I want that link to go to the /shop page, then scroll down to position the page right at the anchor link for this product. But it seems like WordPress' 'pretty permalinks' redirection is getting in the way: as soon as it switches to the /shop#product-name page, the URL gets rewritten to /shop/ and the browser leaves the page scrolled at the top.

My .htaccess file is exactly what WordPress generated: it looks like this:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

Any help in getting these anchor links to work properly would be much appreciated.

(Moderator Note: Title was originally "My permalinks setup doesn't like anchor links to another page.")

Answer 1

Dumb question, but had you tried:

<a href="/shop/#product-name">Buy this product!</a>

Answer 2

Hi @Gabriel Roth:

Any chance you can just code it like this? (note the trailing slash after /shop):

<a href="/shop/#product-name">Buy this product!</a>

Of course if you must have it without a trailing slash I think this will do what you need although I can't fully test for your use-case, you'll have to try it. You copy this code into a plugin or more easily, your theme's functions.php file:

add_filter('user_trailingslashit', 'no_trailing_slash_on_shop');
function no_trailing_slash_on_shop($url_path) {
  if ($url_path=='/shop/')
    $url_path = '/shop';
  return $url_path;
}