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;
});
}
}