如何使用錨點鏈接在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中滾動而不滾動主頁面

回答

相關問題