如何使用锚点链接在div中滚动而不滚动主页面

我试图使用链接滚动div内的内容。 HTML是在这里：如何使用锚点链接在div中滚动而不滚动主页面

<header> 
    <div class="wrapper"> 
    <a href="#" class="logo"><img src="/img/header.jpg" alt="Ace Land Surveying"></a> 
    </div> 
    <nav> 
    <div class="wrapper"> 
     <ul> 
     <li><a href="">Home</a></li> 
     <li><a href="">About Us</a></li> 
     <li><a href="">Types of Surveys</a></li> 
     <li><a href="">About Us</a></li> 
     <li><a href="">Links</a></li> 
     <li><a href="">Request a Survey</a></li> 
     <li><a href="">Past Projects</a></li> 
     <li><a href="">Contact</a></li> 
     <li><a href="" class="last">SOQ</a></li> 
     </ul> 
    </div> 
    </nav> 
</header> 
<div class="wrapper"> 
    <div class="content"> 
    <div class="column left"> 
     <ul class="survey-type-list"> 
     <li><h2><a href="#type1">CLICK HERE</a></h2></li> 
     <li><h2><a href="#type2">CLICK HERE</a></h2></li> 
     <li><h2><a href="#type3">CLICK HERE</a></h2></li> 
     </ul> 
    </div> 
    <div class="column right" id="survey-column"> 
     <div class="survey-type" id="type1"> 
     <p> ... long text ... </p> 
     </div> 
     <div class="survey-type" id="type2"> 
     <p> ... long text ... </p> 
     </div> 
     <div class="survey-type" id="type3"> 
     <p> ... long text ... </p> 
     </div> 
    </div> 
    </div> 
</div> 
<footer> 
    <div class="footer-top"> 
    <div class="wrapper"></div> 
    </div> 
</footer>

和CSS：

header { 
    float: left; 
    width: 100%; 
    height: 200px; 
} 

.wrapper { 
    width: 90%; 
    margin: auto; 
} 

.content { 
    float: left; 
    width: 100%; 
    padding: 20px; 
    background: #02274b; 
} 

.column { 
    min-height: 500px; 
    padding: 20px; 
    border-radius: 20px; 
    color: #fff; 
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), transparent); 
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), transparent); 
} 

.column.left { 
    float: left; 
    width: 20%; 
} 

.column.right { 
    float: right; 
    width: 60%; 
} 

.survey-type-list li { 
    margin: 0 0 4px 0; 
    list-style: none; 
} 

.survey-type-list h2 { 
    font-size: 13px; 
} 

#survey-column { 
    overflow: hidden; 
    height: 460px; 
} 

.survey-type { 
    float: left; 
    width: 100%; 
    height: 460px; 
}

的问题是，与div里面的内容整个页面移动。

这里是一个小提琴：

http://jsfiddle.net/q8a1s5wj/8/

我想在这里等几个线程，但没有人能解决我的问题。

如何防止整个页面滚动并使用我的锚链接在右列内滚动？

我希望能够点击左栏中的链接，看到右栏滚动但不移动整个页面。

来源

2015-11-05 badsyntax

你可以使用JQuery库，使用scrollTop函数:) –

Fiddle

对CSS的一些小修改 - 不这样做给了错误的元素偏移：

#survey-column { 
    position: relative; 
}

这一次只是所以最后div可以滚动到顶部完全：

.survey-type { 
    height: 520px; 
}

，有点脚本，使其工作：

$(function() { 

$('.column.left a').click(function() { 

    var goal = $(this.hash).position().top-20, 
    aim = goal+$('#survey-column').scrollTop(); 

    $('#survey-column').scrollTop(aim); 

    return false; 
}); 
});

扣除goal的20像素只是为了保持与开始时相同的顶部填充...

来源

2015-11-06 01:05:22 Shikkediel

这个解决方案完美地工作。 js正是我所期待的。 – badsyntax

-1

只是这

.stop-scrolling { 
    height: 100%; 
    overflow: hidden; 
}

这个类添加到您的身体标记。

参考：How to disable scrolling temporarily?

更新小提琴：http://jsfiddle.net/q8a1s5wj/2/

来源

2015-11-05 04:13:47 Aatman

感谢您的好评。不幸的是，这没有奏效。这是我的错，虽然我没有在小提琴中准确地重现我的问题。你可以在这里看到我的问题（http://fullclinch.com/survey-types.php）我也将在我的OP – badsyntax

可以为固定顶部的div元素添加位置，我已经检查了的jsfiddle你的代码，并在包装div元素的添加位置样式属性

<div class="wrapper" style="position:fixed; margin-top:10px">

来源

2015-11-05 05:19:47

中重写我的问题和代码。不幸的是，这并没有工作 – badsyntax

如何使用锚点链接在div中滚动而不滚动主页面

回答

相关问题