Question

我正在构建一个网站，它是一个带有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
        })
      }
    );
});

Answer 1

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

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

jQuery问题（Safari / Chrome）具有平滑滚动

1 个答案: