Question

我正在制作一个简单的网站来锻炼，我有JDK - 在页面上移动到和ID的元素。当我按下它们时，它们会向下移动到Id，但是它们会移动过去，它看起来真的很不专业。你们可以帮助我，所以它实际上停在了标题上吗？如果你们明白我的意思，请自己尝试一下：https://itsolidude.github.io/Tea_Cozy/

链接到我的存储库：https://github.com/itsolidude/Tea_Cozy

普通代码：

＆＃13;

nav

＆＃13;

html {
  font-family: Helvetica;
  font-size: 22px;
  color: seashell;
  background-color: black;
  opacity: 0.9;
  text-align: center;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 69px;
  border-bottom: 1px solid seashell;
  position: fixed;
  width: 100%;
  z-index: 2;
  background-color: black;
  top: 0;
}

#locations h2 {
  flex: 1 0 100%; /* shorthand for: flex-grow:1;
                                    flex-shrink: 0;
                                    flex-basis: 100%; */
  text-align: center;
  position: absolute;   /* found this to be a simpler solution, and i sticked with it even tho i dont have exact 10px :p */
  top: 1510px;
  z-index: 3;
}

img {
 height: 50px;
 padding-left: 10px;
}

nav span {
  color: seashell;
  padding-right: 30px;
}

.mission-banner {
  background-color: black;
}

.mission-banner h4 {
  padding-bottom: 10px;
}

a {
  cursor: pointer;
  text-decoration-color: seashell;
}

#mission {
  background-image: url(../images/img-mission-background.jpg);
  position: relative;
  margin: 70px auto 0;
  width: 1200px;
  height: 700px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#tea-of-month {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 1000px;
  margin: 0 auto 70px;
}

#tea-of-month img {
  height: 200px;
  width: 300px;
  margin-bottom: 10px;
}

.item {
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.contact {
  height: 200px;
}
#locations {
  height: 500px;
  width: 1200px;
  margin: 0 auto;
  background-image: url(../images/img-locations-background.jpg);
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

.address {
  background-color: black;
  width: 300px;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 1;
}

#copyright {
  text-align: left;
  margin-left: 20px;
}

＆＃13;

请向我解释一下你做了什么以及为什么：P？

Answer 1

为了获得更流畅的体验，您可以使用javascript和方法scrollIntoView。此方法可以使用您可以指定对齐位置的对象。

Answer 2

您可以使用jquery库，然后为其设置动画。

jsfiddle.net/zoz12kzu

$('a[href*=#]').click(function(event){
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    event.preventDefault();
});

Answer 3

如果只需要使用CSS和平滑滚动

使用translateY

示例：jsfiddle.net/3Lkk50rb

Answer 4

我遇到了同样的问题，直到我发现这一点之后一切正常：基本上你必须将你想要滚动的div作为目标。希望它有所帮助！

//HTML
<a href=""> <li id="about" data-target="me">About me</li></a>    
<div id="me"></div>

//JQuery
$(document).on('click','#about', function(event) {
 event.preventDefault();
 var target = "#" + this.getAttribute('data-target');
$('html, body').animate({
  scrollTop: $(target).offset().top
 }, 500);
});

链接移动到Id看起来很奇怪

4 个答案: