我试图让iPad和iPhone同时使用我当前的笔，似乎我无法得到它。我曾尝试使用和SomeContent以及正常。将不会向下滚动到div。我试图删除javascript，bootstrap，css，甚至将页面缩减为粗略的html一段时间，但没有一个测试似乎解决了它。
文件中包含Bootstrap.js，Jquery.min.js，Bootstrap.min.css和font-awesome.min.css
你可以在这里找到笔：Gregory Buhler Portfolio
HTML：
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand topnav" href="http://GregoryBuhler.com" target="_blank">Gregory Buhler</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="main-nav">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#portfolio">Portfolio</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div id="home" class="text-center">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="homecontent">
<h1>Gregory Buhler Website Design</h1>
<h3>Always on the fantastic side of life</h3>
</div>
<!-- End .homecontent -->
</div>
<!-- End .col-lg-12 -->
</div>
<!-- End .row -->
</div>
<!-- End .container -->
</div>
<!-- End #home -->
<div id="about">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4 col-md-offset-2 text-background">
<h4>A Bit About Me</h4>
<p>When I was a kid my dad pushed for my brother and I to learn computers. I took to it like a fish to water. From 8 onwards my summers were spent indoors working away on simple scripting languages and later on some game modifications.</p>
<p>I won't lie, it wasn't easy getting past my <em>"it needs to be perfect all the time"</em> streak. In fact I still have that streak, I've just learned to fix and perfect as you go instead of making it perfect on the first go-round.</p>
<p>I absolutely love a challenge, critisism of my work used to cause me to clam up a bit. Over time I learned to take the constructive side of critisism and use it to better myself and the content I produce.</p>
<p>None of this would be possible without my amazing wife who puts up with my nose being buried in a book or in code for hours at a time every day. I want to provide the best life I can for her, and I'm good at tech and I love tech, this
is how I plan to provide for her the rest of our lives.</p>
</div>
<!-- End .com-sm-12 .col-md-4 .com-md-offset-2 .text-background -->
<div class="col-md-4 col-md-offset-1 text-center">
<img class="img-circle vertical-align" src="http://i66.tinypic.com/2ywz3w5.jpg" alt="Gregory Buhler in his black cowboy hat.">
</div>
<!-- end .col-md-4 .col-md-offset-1 .text-center -->
</div>
<!-- End .row -->
</div>
<!-- End .container -->
</div>
<!-- End #about -->
<div id="portfolio">
<div class="portfoliocontent text-center">
<div class="container">
<h1>Portfolio</h1>
<div class="row">
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="contact">
<div class="container">
<div class="row">
<div class="contactcontent text-center">
<div class="col-md-12">
<h1>Get ahold of me</h1>
<h3>Open Your Eyes to the Opportunities</h3>
</div>
<hr class="hor-big">
<div class="col-sm-12 col-md-2 col-md-offset-2">
<a href="https://www.facebook.com/GBProgramming" target="_blank" class="btn-inverse"><i class="fa fa-facebook"></i> Facebook
</a>
</div>
<div class="col-sm-12 col-md-2">
<a href="https://twitter.com/gregoryBuhler" target="_blank" class="btn-inverse"><i class="fa fa-twitter"></i> Twitter
</a>
</div>
<div class="col-sm-12 col-md-2">
<a href="https://github.com/Gregory-Buhler" target="_blank" class="btn-inverse"><i class="fa fa-github"></i> Github
</a>
</div>
<div class="col-sm-12 col-md-2">
<a href="https://www.linkedin.com/in/gregorybuhler" target="_blank" class="btn-inverse"><i class="fa fa-linkedin"></i> Linkedin
</a>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container text-center">
<p>© Website created by <a href="http://gregorybuhler.com">Gregory Buhler</a></p>
</div>
</footer>
</body>
CSS：
#about {
background: url(http://i63.tinypic.com/213ht14.jpg) 50% 0 no-repeat fixed;
background-size: cover;
padding-top: 10%;
padding-bottom: 10%;
font-size: 1.1em;
}
#about .text-background {
background: rgba(255, 255, 255, .3);
font-family: droid-serif;
color: rgb(30, 30, 30);
padding: 10px;
border-radius: 10px;
}
#about img {
padding: 20px;
}
#about,
#contact,
#home,
#portfolio {
overflow: hidden;
min-height: 900px;
}
a.btn-inverse {
position: relative;
display: inline-block;
margin-top: 10px;
width: auto;
transition: all .2s ease-in-out;
background-color: rgb(90, 90, 90);
border: rgb(60, 60, 60) 1px solid;
padding: 10px 15px;
border-radius: 5px;
color: white;
}
a.btn-inverse:hover {
background-color: rgb(0, 0, 0);
transform: scale(1.1);
text-decoration: none;
}
body {
padding-top: 50px;
}
#contact {
background: url(http://i63.tinypic.com/2rp9tau.jpg) 50% 0 no-repeat fixed;
background-size: cover;
}
.contactcontent {
padding-top: 25%;
padding-bottom: 25%;
}
footer {
padding-top: 10px;
}
h1,
h2,
h3 {
font-family: Cinzel;
text-shadow: 1px 1px 1px #000;
}
h1 {
font-size: 4em;
color: rgb(100, 100, 100);
}
h2 {
font-size: 3em;
}
h3 {
font-size: 2em;
color: rgb(150, 150, 150)
}
h4 {
font-size: 1.7em;
font-weight: 700;
}
#home {
background: url(http://i65.tinypic.com/vht1c2.jpg) 50% 0 no-repeat fixed;
background-size: cover;
}
.homecontent {
padding-top: 25%;
padding-bottom: 20%;
}
.hor-big {
clear: both;
border: 0;
height: 0;
box-shadow: 0 0 10px 1px black;
}
.hor-big:after {
content: "\00a0";
}
.imgholder {
margin: auto;
border-radius: 5px;
border: rgb(20, 20, 20) 1px solid;
background-color: rgb(250, 250, 250);
width: 190px;
height: 180px;
padding-top: 5px;
padding-left: 5px;
}
.imgholder img {
float: left;
}
.inset-shadow {
position: relative;
float: left;
}
.inset-shadow:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
-moz-box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
}
#my-row {
display: table;
}
#my-row .content {
float: none;
display: table-cell;
vertical-align: middle;
}
.navbar {
margin-bottom: 0;
position: fixed;
}
.nav li:hover {
background-color: rgb(28, 28, 28);
}
#portfolio {
background: url(http://i67.tinypic.com/287nl8z.jpg) 50% 0 repeat fixed;
background-size: cover;
}
.portfoliocontent {
padding-top: 10%;
padding-bottom: 10%;
}
.portfoliocontent .row > div {
transform: all .4s ease-in-out;
margin-top: 10px;
}
JS：
$("nav ul li a[href^='#']").on('click', function(e) {
e.preventDefault();
// animate the scroll
y = $(this.hash).offset().top - 50;
if ((y - window.pageYOffset) > 0) {
time = y - window.pageYOffset;
} else {
time = window.pageYOffset - y;
}
$('html, body').animate({
scrollTop: y
}, time);
});
任何帮助将不胜感激！谢谢！