jQuery问题(Safari/Chrome)与平滑滚动

jQuery issues (Safari/Chrome) with smooth scroll

本文关键字:平滑 滚动 Chrome 问题 Safari jQuery      更新时间:2023-09-26

我正在建立一个网站,这是一个单一的滚动与smoothscrolls和一些更多的JS跨页面的一些功能。

在谷歌浏览器上,这似乎对我没有任何问题;尽管一些朋友有不同的结果。在Safari上,似乎有一些问题,但最重要的是,没有一个平滑的滚动似乎工作(大部分JS),直到你过去的"着陆滑动"

我已经尝试调试这个并检查web检查器控制台,但没有出现错误。

有人能帮忙吗?

我的JS代码在这里:http://goo.gl/rcvJe和我在这里建立的网站:http://goo.gl/0vQUe

提前感谢,R

// Resizing each slide height per height of window
$(document).ready(function() {
    if ( $(window).width() > 700 ) {
        $(document).ready(function() {
            var height = $(window).outerHeight() + 50;
            $('.each-slide').outerHeight(height);
        });
        $(window).resize(function() {
            var height = $(window).outerHeight() + 50;
            $('.each-slide').outerHeight(height);
        });
    }
    if ( $(window).width() > 700 ) {
        $(document).ready(function() {
            var height = $(window).outerHeight() - 199;
            $('.first-slide').outerHeight(height);
        });
        $(window).resize(function() {
            var height = $(window).outerHeight() - 199;
            $('.first-slide').outerHeight(height);
        });
    }
});
// Initialise the smooth scrolling on anchors
$(document).ready(function() {
    $('a.smooth-scroll-no-offset').smoothScroll({
        easing: 'swing',
        speed: 500
    });
});
$(document).ready(function() {
    $('a.smooth-scroll').smoothScroll({
        easing: 'swing',
        speed: 500,
        offset: 100
    });
});
// Fitvid
$(document).ready(function(){
    $('.video-container').fitVids();
});
// Remove arrow hint when near bottom
/*$(window).scroll(function() {
   if ($(window).scrollTop() + $(window).height() > $(document).height() - 700 ) {
       $('.continue-down').fadeOut();
   }
   else {
       $('.continue-down').fadeIn();
   }
});*/
// Ajax subscribe form
$(function () {
    $('#subForm').submit(function (e) {
        e.preventDefault();
        $.getJSON(
        this.action + "?callback=?",
        $(this).serialize(),
        function (data) {
            if (data.Status === 400) {
                alert("Error: " + data.Message);
            } else {
                $('#subForm input[type=submit]').animate({opacity:0}).delay(2000).animate({opacity:1});
                $('.confirmation-message').animate({opacity:1}).delay(2000).animate({opacity:0});;
                $('#subForm').find('input[type=text]').val('');
            }
        });
    });
});
// Some simple colours on hovers
$(document).ready(function() {
    $('.menu-navigation-desktop ul li:nth-child(2) a').hover(function() 
        { $('.site-intro a:nth-of-type(1)').css({'color':'#69B6D7','border-bottom':'1px solid'}); },
    function () { $('.site-intro a:nth-of-type(1)').css({'color':'#333333','border-bottom':'0'}); }
    );
    $('.menu-navigation-desktop ul li:nth-child(3) a').hover(function() 
        { $('.site-intro a:nth-of-type(2)').css({'color':'#A396C0','border-bottom':'1px solid'}); },
    function () { $('.site-intro a:nth-of-type(2)').css({'color':'#333333','border-bottom':'0'}); }
    );
    $('.menu-navigation-desktop ul li:nth-child(4) a').hover(function() 
        { $('.site-intro a:nth-of-type(3)').css({'color':'#777777','border-bottom':'1px solid'}); },
    function () { $('.site-intro a:nth-of-type(3)').css({'color':'#333333','border-bottom':'0'}); }
    );
});
// Contact form styles and triggers
$(document).ready(function(){
    var $c=$('.menu-navigation-desktop ul li:nth-child(5) a').css('background-color');
    $('.contact-form').css('background-color',$c);
    $('.menu-navigation-desktop li a.contact-form-action').click(function() {
        $('.contact-form').toggle();
    });
});
// Animations
$(document).ready(function() {
    $('.map-icon').addClass('animated pulse');
});
// Mobile navigation
$(document).ready(function() {
    $('.navigation-trigger').click(function() {
        $('.menu-navigation-mobile ul').slideToggle('fast');
        $('span', this).text($('span', this).text() == 'navigatedown' ? 'navigateup' : 'navigatedown');
    });
});
// Design process slider
$(document).ready(function() {
    var unslider = $('.design-process-slider').unslider({
        delay: false,
        keys: true,
        dots: true,
        fluid: true
    });
});
$(document).ready(function() {
    $('.design-process-slider-arrow').click(function(event) {
        event.preventDefault();
        if ($(this).hasClass('next')) {
          unslider.data('unslider')['next']();  
        } else {
          unslider.data('unslider')['prev']();  
        };
    });
});
// Sustainability slider
$(document).ready(function() {
    var unslider2 = $('.sustainability-slider').unslider({
        delay: false,
        keys: true,
        dots: false,
        fluid: true
    });
});
$(document).ready(function() {
    $('.sustainability-slider-arrow').click(function(event) {
        event.preventDefault();
        if ($(this).hasClass('next')) {
          unslider2.data('unslider')['next']();  
        } else {
          unslider2.data('unslider')['prev']();  
        };
    });
});
// Testimonial slider
$(document).ready(function() {
    var unslider3 = $('.testimonial-slider').unslider({
        delay: false,
        keys: true,
        dots: false,
        fluid: true
    });
});
$(document).ready(function() {
    $('.testimonial-slider-arrow').click(function(event) {
        event.preventDefault();
        if ($(this).hasClass('next')) {
          unslider3.data('unslider')['next']();  
        } else {
          unslider3.data('unslider')['prev']();  
        };
    });
});
// Map tip hovers
$(document).ready(function() {
    $('.map-icon.one').hover(
      function () {
        $('.map-tip.one').fadeIn();
      },
      function () {
        $('.map-tip.one').fadeOut();
      }
    );
    $('.map-icon.two').hover(
      function () {
        $('.map-tip.two').fadeIn();
      },
      function () {
        $('.map-tip.two').fadeOut();
      }
    );
    $('.map-icon.three').hover(
      function () {
        $('.map-tip.three').fadeIn();
      },
      function () {
        $('.map-tip.three').fadeOut();
      }
    );
    $('.map-icon.four').hover(
      function () {
        $('.map-tip.four').fadeIn();
      },
      function () {
        $('.map-tip.four').fadeOut();
      }
    );
});
// Testimonial circle cycles
$(document).ready(function() {
    $('.testimonial-container').cycle();
});
//
$(document).ready(function() {
    $('.menu-navigation-desktop ul li').click(function() {
        $('.menu-navigation-desktop ul li').removeClass('active-slide');
        $(this).addClass('active-slide');
    });
});
$(document).ready(function() {
    var sections = $('.each-slide-section-container'),
        links = $('.menu-navigation-desktop ul li a'),
        lis = $('.menu-navigation-desktop ul li');
    $(window).scroll(function() {
        var currentPosition = $(this).scrollTop();
        links.removeClass('selected');
        lis.removeClass('active-slide');
        sections.each(function() {
            var top = $(this).offset().top,
                bottom = top + $(this).height();
            if (currentPosition >= top && currentPosition <= bottom) {
                var link = $('a[href="#' + this.id + '"]');
                link.addClass('selected');
                link.parent().addClass('active-slide');
            }
        });
    });
});
$(document).ready(function() {
    $('.each-slide .design-spread-container .design-spread-element').hover(
      function () {
        $(this).animate({
            opacity: 1
        })
      },
      function () {
        $(this).animate({
            opacity: 0
        })
      }
    );
});

这个问题解决了我的问题。

https://github.com/kswedberg/jquery-smooth-scroll/issues/29