0

Basically I've created a single page website and I've used JQuery to create a ScrollTo effect when clicking on different links. Because I have a fixed div at the top of the page, I've offset the target to the height of the fixed div at the top of the page, so that when it scrolls, the contents isn't hidden by the fixed div at the top of the page:

if ($target) {
     var targetOffset = $target.offset().top - $("#div_at_top_of_page").outerHeight();

This works fine, scrolling the target div below my fixed navigation at the top of my page. However in Safari, the scroll to already scrolls below the div by default, so adding:

$("#div_at_top_of_page").outerHeight();

this causes Safari to scroll to the target, but also adding the height of the div at the top of the page, creating a margin.

I'm just looking for a solution to cancel this:

$("#div_at_top_of_page").outerHeight() 

for Safari only. Any help would be appreciated, thanks!

EDIT: I'm open to any other solutions rather than browser detection.

Here's the complete thing:

$(document).ready(function() {
 function filterPath(string) {
 return string
 .replace(/^\//,'')
 .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
 .replace(/\/$/,'');
    }
$('a[href*=#]').each(function() {
 if ( filterPath(location.pathname) == filterPath(this.pathname)
 && location.hostname == this.hostname
 && this.hash.replace(/#/,'') ) {
  var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
  var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor :    false;
   if ($target) {
     var targetOffset = $target.offset().top - $("#fixed_div_at_top").outerHeight();
     $(this).click(function(e) {
       $('html, body').animate({scrollTop: targetOffset}, 800);
       e.preventDefault();
       var d = document.createElement();
    d.style.height = "101%";
    d.style.overflow = "hidden";
    document.body.appendChild(d);
    window.scrollTo(0,scrollToM);
    setTimeout(function() {
    d.parentNode.removeChild(d);
        }, 10);
       return false;
     });
  }
}
4

1 回答 1

0

您的问题的直接答案是使用$.browserhttp://api.jquery.com/jQuery.browser/ - 很久以前已弃用并在 jQuery 1.9 中删除),但我不能推荐它。最好使用特征检测。最好不要依赖任何一种方法。之所以提供此答案只是因为您最初专门询问了针对 Safari 的问题。

于 2013-04-17T17:56:37.610 回答