滚动动画未应用在第一个菜单项的顶部

问题描述

我设法在WordPress网站上实现了在此处抓取的摘录: http://scentology.burnnotice.co.za/

I managed to implement this snippet grabbed here on SO to my WordPress site:http://scentology.burnnotice.co.za/

$("#primary-menu > li > a").on("click", function(event){
  event.preventDefault();
  var bookMark = $(this).attr("href").substring(1,$(this).attr("href").length);
  bookMarkTag = $("a[name='"+ bookMark +"']");
  if(bookMark !== undefined) {
    $('html,body').animate({scrollTop: bookMarkTag.offset().top}, Math.floor(bookMarkTag.offset().top));
  }         
});

当我单击菜单项时，它会完美地将我带到右侧部分.唯一的问题是，当我单击主页"项时，它会滚动回到顶部，但动画不适用，因此执行得太快了.怎样将动画也应用到主菜单项?

When I click on a menu item,it leads me to the right section perfectly.Only problem is that when I click on the Home item, it scrolls back to the top but the animation does not apply so it goes too fast.How can apply the animation to the home menu item as well?

推荐答案

能否请您尝试以下对我有用的代码.您可以根据需要更改 animateSpeed

Can you please try below code it works for me. you can change animateSpeed as you want

$("#primary-menu > li > a").on("click", function(event){
    event.preventDefault();
    var bookMark = $(this).attr("href").substring(1,$(this).attr("href").length);
    bookMarkTag = $("a[name='"+ bookMark +"']");
    if(bookMark !== undefined) {
        $('html,body').animate({scrollTop: bookMarkTag.offset().top}, Math.floor(bookMarkTag.offset().top));
    }         
});

替换为

$("#primary-menu > li > a").on("click", function(event){
    event.preventDefault();
    var bookMark = $(this).attr("href").substring(1,$(this).attr("href").length);
    bookMarkTag = $("a[name='"+ bookMark +"']");
    var animateSpeed = 500;
    if(bookMark !== undefined) {
        $('html,body').animate({scrollTop: bookMarkTag.offset().top}, animateSpeed );
    }
});

这篇关于滚动动画未应用在第一个菜单项的顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！