Jquery - （平滑滚动）。在不同的浏览器中使用 [英] Jquery - (Smooth Scrolling) .Offset in different browsers

问题描述

您好，我的名字是Irving Armenta，我是平面设计师，我正在尝试制作我的第一个网页，因为编码不是我的强项，我在这里寻找答案，我感谢任何评论或评论，为了解决这个问题：



这是我网站的链接： http：// irvingtesting.byethost5.com/



这是一个测试网站，在免费服务器上，我的问题是 简单 ;

在谷歌浏览器中，我的页面工作得很好，它将类.active附加到导航栏中的li，这是一个。

该类在到达窗口顶部时被添加;

问题出现在Firefox和IE11中，（最新版本2015）

似乎#divs没有完全击中顶部，它就像1像素差异，所以.active类不起作用，它不会激活，除非你手动向下滚动1像素因此，影响网站的导航;这些是我网站上的资产，我用于多种功能：



i使用Skeleton http://getskeleton.com/ 作为我的响应式锅炉板，这是我第一次这样做，我想要一个响应式网站。



网站非常简单，你可能会看到，我只考虑了3个部分，介绍了我自己，我的工作和联系部分。



我在网站上运行了很多Jquery插件，这个装载器就像网站前面的一个巨大的div，一些带有jquery和东西的黑客。



我使用的是： http://webpop.github.io/jquery固定导航栏的.pin / 。



我使用的是： http://scrollme.nckprsn.com/对于投资组合中内容div的淡入淡出动画



现在我在页脚上有这些脚本：



这就是平滑滚动的原因：

< script type =   text / javascript> 
 $（ function （）{
 $（'  a [href * =＃]：not（[href =＃]）'）。click（ function （）{
  if （ location  .pathname.replace（/ ^ \  //  ，''）== this.pathname.replace（/ ^ \ //，''）&& location.hostname == this .hostname）{ 
  var  target = $（ this  .hash）; 
 target = target.length？target：$（'  [name =' +  this  .hash.slice（ 1 ）+ ' ]'）; 
  if （target.length）{
 $（< span class =code-string>'  body，html'）。animate（{
 scrollTop：target.offset（）。top 
}， 1200 ）; 
  return   false ; 
} 
} 
}）; 
}）; 
< / script> 

这就是将.active类添加到li的内容：

< script type =  文本/ JavaScript的> 
 $（ document ）。ready（ function （）{
  var  aChildren = $（  nav li）。 children（）;  //  查找列表项的子项 
  var  aArray = [];  //  创建空aArray  
  for （ var  i =  0 ; i< aChildren.length; i ++）{
  var  aChild = aChildren [i]; 
  var  ahref = $（aChild）.attr（'  href'）; 
 aArray.push（ahref）; 
}  //  这个for循环使用属性href值填充aArray  
 
 $（ window ）。scroll（ function （）{
  var  windowPos = $（ window ）scrollTop的（）;  //  从页面顶部获取窗口的偏移量 
  var  windowHeight = $（ window ）。height（）;  //  获取窗口的高度 
  var  docHeight = $（ document ）。height（）; 
 
  for （ var  i =  0 ; i< aArray.length; i ++）{
  var  theID = aArray [i]; 
  var  divPosid = $（theID）; 
  if （！divPosid.length）{
  return ; 
} 
  var  divPos = divPosid.offset（）。top;  //  从页面顶部获取div的偏移量 
  var  divHeight = $（theID）.outerHeight（）;  //  获取有问题的div的高度 
  if （windowPos> = divPos&& windowPos<（divPos + divHeight））{
 $（  a [href =' + theID +  ']).addClass(  nav-active）; 
}  else  {
 $（  a [href =' + theID +  ']）。removeClass （  nav-active）; 
} 
} 
 
 如果（windowPos + windowHeight == docHeight）{
  if （！$（  nav li：last-child a）。hasClass（  nav-active））{
  var  navActiveCurrent = $（  .nav-active） .attr（  href）; 
 $（  a [href =' + navActiveCurrent +  ']）。removeClass（  NAV-活性）; 
 $（  nav li：last-child a）。addClass（  nav-active）; 
} 
} 
}）; 
}）; 
< / script> 

这是上面脚本的来源：http://callmenick.com/post/single-page-site-with-smooth-scrolling -highlighted-link-and-fixed-navigation



非常感谢您的关注。

解决方案

（ function （）{

（' a [href * =＃]：not（[href =＃]）'）。click（ function （）{
if （ location .pathname.replace（/ ^ \ // ，''）== this.pathname.replace（/ ^ \ //，''）&& location.hostname == this.hostname）{
var target =

（ this .hash）;
target = target.length？目标：

Hello, my name is Irving Armenta, i am a Graphic designer and i am trying to make my first webpage, since coding is not my forte, i am looking for an answer in here, i appreciate any remark or comment, in order to fix this:

This is the link to my Site: http://irvingtesting.byethost5.com/

It's a test site, in a free server, my issue is "simple";
in google chrome, my page works completely fine, it appends the class ".active" to the "li" in the navigation bar which is a .
The class is added when it hits the window top;
The problem happens in Firefox and IE11, (Up to date versions 2015)
It seems like the #divs don't hit completely the top, it's like 1 pixel difference, so the ".active" class doesn't work, it doesn't get active, unless you manually scroll down that "1 pixel" Therefore, affecting the navigation of the site; These are the assets on my site, all that i am using for the multiple functions:

i am using "Skeleton" http://getskeleton.com/ as my responsive boiler plate, this is my first time doing this, i want a responsive site.

The site is pretty simple as you may see, just 3 sections i have in mind, some introduction to myself, my work and a contact section.

I got many Jquery Plugins working on the site, a loader which is just like a huge div infront of the site, some hacks with jquery and stuff.

I am using this: http://webpop.github.io/jquery.pin/ for the pinned navigation bar.

I am using this: http://scrollme.nckprsn.com/ for the fade in animation of the content div in "Portfolio"

now i have these Scripts on the footer:

This is what makes the Smooth Scrolling:

<script type="text/javascript">
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('body,html').animate({
          scrollTop: target.offset().top
        }, 1200);
        return false;
      }
    }
  });
});
</script>

This is what adds the class ".active" to the "li" :

<script type="text/javascript">
$(document).ready(function(){
    var aChildren = $("nav li").children(); // find the a children of the list items
    var aArray = []; // create the empty aArray
    for (var i=0; i < aChildren.length; i++) {    
        var aChild = aChildren[i];
        var ahref = $(aChild).attr('href');
        aArray.push(ahref);
    } // this for loop fills the aArray with attribute href values

    $(window).scroll(function(){
        var windowPos = $(window).scrollTop(); // get the offset of the window from the top of page
        var windowHeight = $(window).height(); // get the height of the window
        var docHeight = $(document).height();

        for (var i=0; i < aArray.length; i++) {
            var theID = aArray[i];
           var divPosid = $(theID);
    if (!divPosid.length) {
        return;
    }
    var divPos = divPosid.offset().top; // get the offset of the div from the top of page
            var divHeight = $(theID).outerHeight(); // get the height of the div in question
            if (windowPos >= divPos && windowPos < (divPos + divHeight)) {
                $("a[href='" + theID + "']").addClass("nav-active");
            } else {
                $("a[href='" + theID + "']").removeClass("nav-active");
            }
        }

        if(windowPos + windowHeight == docHeight) {
            if (!$("nav li:last-child a").hasClass("nav-active")) {
                var navActiveCurrent = $(".nav-active").attr("href");
                $("a[href='" + navActiveCurrent + "']").removeClass("nav-active");
                $("nav li:last-child a").addClass("nav-active");
            }
        }
    });
});
</script>

This is the origin of the script above: http://callmenick.com/post/single-page-site-with-smooth-scrolling-highlighted-link-and-fixed-navigation

Thank you very much for your attention.

解决方案

(function() {

('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target =

(this.hash); target = target.length ? target :

这篇关于Jquery - （平滑滚动）。在不同的浏览器中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！