Question

我正在尝试从this tutorial实施“返回顶部”按钮。它在my JSFiddle上运行正常但由于某种原因它无法在my live page上运行。知道为什么吗？ Safari不会返回任何错误，按钮会显示。唯一不起作用的是向上滚动。非常感谢

// Contact Form
$(document).ready(function() {
    $("#contactfrm").submit(function(e) {
        e.preventDefault();
        var name = $("#name").val();
        var email = $("#email").val();
        var message = $("#message").val();
        var dataString = 'name=' + name + '&email=' + email + '&message=' + message;

        function isValidEmail(emailAddress) {
            var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
            return pattern.test(emailAddress);
        };
        if (isValidEmail(email) && (message.length > 1) && (name.length > 1)) {
            $.ajax({
                type: "POST",
                url: "sendmessage.php",
                data: dataString,
                success: function() {
                    $('button[name="submit"]').hide();
                    $('.error').hide()
                    $('.success').fadeIn(1000);
                }
            });
        } else {
            $('.error').fadeIn(1000);
        }
        return false;
    });

});

//==============
//! Newsbox
//==============

$(document).ready(function(e) {
    $('#news_box').lc_news_box({
        theme: 'minimal',
        layout: 'horizontal',
        news_per_time: 1,
        height: 130,
        autoplay: true,
        boxed_news: true,
        social_share: true,
        lightbox: false,
        hide_elements: 'image',
        carousel: true,

        src : [
        {
            type: 'twitter',
            id: 'DavidBlondiau',
            include_retweet: true,
            use_avatar: false
        }
        ]
    });
});

//==============
//! Smooth scrolling
//==============

$(document).ready(function() {
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();

        var target = this.hash,
        $target = $(target);

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});


//==============
//! Hide mails
//==============

function sendAnnotatedMailTo(name, company, domain, subject, body) {
    locationstring = 'mai' + 'lto:' + name + '@' + company + '.' + domain + "?subject=" + escape(subject) + "&body=" + escape(body);
    window.location.replace(locationstring);
}

//==============
//! Menu
//==============

function dropDown() {
    $(this).find('ul').stop().slideToggle().css('padding-left', 0);
    $(this).find('ul').parent().find('a').toggleClass('activeNav');
    $(this).find('ul > li > a').removeClass('activeNav');
}

$('nav ul li ul').hide();
$('nav ul li').mouseenter(dropDown);
$('nav ul li').mouseleave(dropDown);


//==============
//! Floatlabels
//==============

$(function() {
    $('input.floatlabel').floatlabel();
});

//==============
//! Wow
//==============
new WOW().init();

//==============
//! Browser
//==============


$(document).ready(function() {
    var offset = 220;
    var duration = 500;
    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('.back-to-top').fadeIn(duration);
        } else {
            jQuery('.back-to-top').fadeOut(duration);
        }
    });

    jQuery('.back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    })
});

Answer 1

为什么不使用HTML？<a href="#header"> Go to top</a>

Answer 2

使用锚点并使用以下方法进行平滑滚动：

http://bradsknutson.com/blog/smooth-scrolling-to-anchor-with-jquery/

演示不是很好，但它就像一个魅力

回到顶部按钮不在我的网站上工作

2 个答案: