github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2025-12-16 22:22:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix：修改帮助页面锚点问题

Browse Source
This commit is contained in:
spylecym 2023-07-18 11:22:07 +08:00
parent f33faf66a6
commit 7e77ac1ecb
4 changed files with 128 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public/site/css/help.css vendored
View File

@ -191,8 +191,3 @@
position: sticky; position: sticky;
top: 80px; top: 80px;
} }
.help-a{
display: block;
width: 100%;
height: 100%;
}

27
public/site/en/help.html
View File

@ -765,5 +765,32 @@ document.addEventListener("DOMContentLoaded", function() {
}); });
} }
}); });
//获取导航链接元素
const anchorLinks = document.querySelectorAll(".help-a");
// 监听页面滚动事件
window.addEventListener('scroll', () => {
// 遍历导航链接元素
anchorLinks.forEach((link,index) => {
const sectionId = link.getAttribute('href'); // 获取锚点ID
const section = document.querySelector(sectionId); // 获取对应的锚点元素
if (
section &&
section.getBoundingClientRect().top>=110&&section.getBoundingClientRect().top<=150
) {
rm()
link.parentNode.classList.add('active');
}
if(section &&index===0&&section.getBoundingClientRect().top>150){
rm()
link.parentNode.classList.add('active')
}
});
});
const rm = () => {
anchorLinks.forEach(link1=>{
link1.parentNode.classList.remove('active')
})
}
</script> </script>
</html> </html>

1
public/site/en/log.html
View File

@ -385,7 +385,6 @@ document.addEventListener("DOMContentLoaded", function() {
} }
}); });
} }
}); });
</script> </script>
</html> </html>

169
public/site/zh/help.html
View File

@ -275,82 +275,82 @@
<li class="help-l-ul-item mb-24"> <li class="help-l-ul-item mb-24">
<h5 class="txt-4001620 help-h5 mb-16" style="font-weight: 500;">基本</h5> <h5 class="txt-4001620 help-h5 mb-16" style="font-weight: 500;">基本</h5>
<ol class="help-l-ol"> <ol class="help-l-ol">
<li class="l-ul-item active"> <li class="l-ul-item active" data-id="section-1">
<a class="txt-4001620 txt help-a" href="#section-1">了解DooTask</a> <a class="txt-4001620 txt help-a">了解DooTask</a>
</li> </li>
<li class="l-ul-item"> <li class="l-ul-item" data-id="section-2">
<a class="txt-4001620 txt help-a" href="#section-2">注册和登录</a> <a class="txt-4001620 txt help-a">注册和登录</a>
</li> </li>
<li class="l-ul-item"> <li class="l-ul-item" data-id="section-3">
<a class="txt-4001620 txt help-a" href="#section-3">通知公告</a> <a class="txt-4001620 txt help-a">通知公告</a>
</li> </li>
<li class="l-ul-item"> <li class="l-ul-item" data-id="section-4">
<a class="txt-4001620 txt help-a" href="#section-4">帐户设置</a> <a class="txt-4001620 txt help-a">帐户设置</a>
</li> </li>
</ol> </ol>
</li> </li>
<li class="help-l-ul-item mb-24"> <li class="help-l-ul-item mb-24">
<h5 class="txt-4001620 help-h5 mb-16" style="font-weight: 500;">项目</h5> <h5 class="txt-4001620 help-h5 mb-16" style="font-weight: 500;">项目</h5>
<ol class="help-l-ol"> <ol class="help-l-ol">
<li class="l-ul-item"> <li class="l-ul-item" data-id="section-5">
<a class="txt-4001620 txt help-a" href="#section-5">了解项目</a> <a class="txt-4001620 txt help-a">了解项目</a>
</li> </li>
<li class="l-ul-item"> <li class="l-ul-item" data-id="section-6">
<a class="txt-4001620 txt help-a" href="#section-6">创建项目</a> <a class="txt-4001620 txt help-a">创建项目</a>
</li> </li>
<li class="l-ul-item"> <li class="l-ul-item" data-id="section-7">
<a class="txt-4001620 txt help-a" href="#section-7">任务列表</a> <a class="txt-4001620 txt help-a">任务列表</a>
</li> </li>
<li class="l-ul-item"> <li class="l-ul-item" data-id="section-8">
<a class="txt-4001620 txt help-a" href="#section-8">项目进展</a> <a class="txt-4001620 txt help-a">项目进展</a>
</li> </li>
</ol> </ol>
</li> </li>
<li class="help-l-ul-item mb-24"> <li class="help-l-ul-item mb-24">
<h5 class="txt-4001620 help-h5 mb-16" style="font-weight: 500;">任务</h5> <h5 class="txt-4001620 help-h5 mb-16" style="font-weight: 500;">任务</h5>
<ol class="help-l-ol"> <ol class="help-l-ol">
<li class="l-ul-item"> <li class="l-ul-item" data-id="section-9">
<a class="txt-4001620 txt help-a" href="#section-9">任务的使用</a> <a class="txt-4001620 txt help-a">任务的使用</a>
</li> </li>
<li class="l-ul-item"> <li class="l-ul-item" data-id="section-10">
<a class="txt-4001620 txt help-a" href="#section-10">任务优先级</a> <a class="txt-4001620 txt help-a">任务优先级</a>
</li> </li>
<li class="l-ul-item"> <li class="l-ul-item" data-id="section-11">
<a class="txt-4001620 txt help-a" href="#section-11">评论与新闻</a> <a class="txt-4001620 txt help-a">评论与新闻</a>
</li> </li>
<li class="l-ul-item"> <li class="l-ul-item" data-id="section-12">
<a class="txt-4001620 txt help-a" href="#section-12">次要任务</a> <a class="txt-4001620 txt help-a">次要任务</a>
</li> </li>
</ol> </ol>
</li> </li>
<li class="help-l-ul-item mb-24"> <li class="help-l-ul-item mb-24">
<h5 class="txt-4001620 help-h5 mb-16" style="font-weight: 500;">团队</h5> <h5 class="txt-4001620 help-h5 mb-16" style="font-weight: 500;">团队</h5>
<ol class="help-l-ol"> <ol class="help-l-ol">
<li class="l-ul-item"> <li class="l-ul-item" data-id="section-13">
<a class="txt-4001620 txt help-a" href="#section-13">团队和成员</a> <a class="txt-4001620 txt help-a">团队和成员</a>
</li> </li>
<li class="l-ul-item"> <li class="l-ul-item" data-id="section-14">
<a class="txt-4001620 txt help-a" href="#section-14">成员分组</a> <a class="txt-4001620 txt help-a">成员分组</a>
</li> </li>
<li class="l-ul-item"> <li class="l-ul-item" data-id="section-15">
<a class="txt-4001620 txt help-a" href="#section-15">团队管理</a> <a class="txt-4001620 txt help-a">团队管理</a>
</li> </li>
<li class="l-ul-item"> <li class="l-ul-item" data-id="section-16">
<a class="txt-4001620 txt help-a" href="#section-16">团队设置</a> <a class="txt-4001620 txt help-a">团队设置</a>
</li> </li>
</ol> </ol>
</li> </li>
<li class="help-l-ul-item mb-24"> <li class="help-l-ul-item mb-24">
<h5 class="txt-4001620 help-h5 mb-16" style="font-weight: 500;">文件</h5> <h5 class="txt-4001620 help-h5 mb-16" style="font-weight: 500;">文件</h5>
<ol class="help-l-ol"> <ol class="help-l-ol">
<li class="l-ul-item"> <li class="l-ul-item" data-id="section-17">
<a class="txt-4001620 txt help-a" href="#section-17">文件类型</a> <a class="txt-4001620 txt help-a">文件类型</a>
</li> </li>
<li class="l-ul-item"> <li class="l-ul-item" data-id="section-18">
<a class="txt-4001620 txt help-a" href="#section-18">共享的文件</a> <a class="txt-4001620 txt help-a">共享的文件</a>
</li> </li>
<li class="l-ul-item"> <li class="l-ul-item" data-id="section-19">
<a class="txt-4001620 txt help-a" href="#section-19">访问权限</a> <a class="txt-4001620 txt help-a">访问权限</a>
</li> </li>
</ol> </ol>
</li> </li>
@ -723,17 +723,28 @@
</body> </body>
<script src="../js/common.js"></script> <script src="../js/common.js"></script>
<script> <script>
const tabs = document.querySelector('.help-l-1920'); const tabItems = document.querySelectorAll('.l-ul-item');
const tabItems = tabs.querySelectorAll('.l-ul-item'); function rm(){
tabs.addEventListener('click', function (event) { tabItems.forEach(link1=>{
const clickedItem = event.target.closest('.l-ul-item'); link1.classList.remove('active')
if (clickedItem && !clickedItem.classList.contains('active')) { })
// 切换激活状态 }
for (let [index,value] of tabItems.entries()) { tabItems.forEach(item=>{
value.classList.toggle('active', value === clickedItem); item.addEventListener('click',function(event){
} event.preventDefault()
} const id = event.currentTarget.getAttribute('data-id')
}); const content = document.getElementById(`${id}`)
if (content) {
const offset = 90; // 上偏移量（可以根据需要进行调整）
const targetPosition = content.getBoundingClientRect().top + window.pageYOffset; // 目标位置相对于视口的位置
// 滚动到目标位置，并考虑上偏移量
window.scrollTo({
top: targetPosition-offset,
behavior: "smooth"
});
}
})
})
/* 当屏幕宽度低于768px时显示logs的抽屉的相关操作逻辑 */ /* 当屏幕宽度低于768px时显示logs的抽屉的相关操作逻辑 */
const helpMenuBtn = document.getElementById('help-menu-btn'); const helpMenuBtn = document.getElementById('help-menu-btn');
const helpDrawer = document.querySelector('.help-drawer'); const helpDrawer = document.querySelector('.help-drawer');
@ -743,25 +754,47 @@ helpMenuBtn.addEventListener('click', () => {
const closeHelpDraweHandle = ()=>{ const closeHelpDraweHandle = ()=>{
helpDrawer.classList.remove('open-help-drawer'); helpDrawer.classList.remove('open-help-drawer');
} }
document.addEventListener("DOMContentLoaded", function() { // document.addEventListener("DOMContentLoaded", function() {
const anchors = document.querySelectorAll("a[href^='#section-']"); // const anchors = document.querySelectorAll("a[href^='#section-']");
// 遍历所有锚点链接 // // 遍历所有锚点链接
for (const anchor of anchors) { // for (const anchor of anchors) {
anchor.addEventListener("click", function(event) { // anchor.addEventListener("click", function(event) {
event.preventDefault(); // 阻止默认的跳转行为 // event.preventDefault(); // 阻止默认的跳转行为
const targetId = anchor.getAttribute("href").substring(1); // 获取目标锚点的 id // const targetId = anchor.getAttribute("href").substring(1); // 获取目标锚点的 id
const targetElement = document.getElementById(targetId); // 获取目标锚点元素 // const targetElement = document.getElementById(targetId); // 获取目标锚点元素
if (targetElement) { // if (targetElement) {
const offset = 90; // 上偏移量（可以根据需要进行调整） // const offset = 90; // 上偏移量（可以根据需要进行调整）
const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset; // 目标位置相对于视口的位置 // const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset; // 目标位置相对于视口的位置
// 滚动到目标位置，并考虑上偏移量 // // 滚动到目标位置，并考虑上偏移量
window.scrollTo({ // window.scrollTo({
top: targetPosition-offset, // top: targetPosition-offset,
behavior: "smooth" // behavior: "smooth"
}); // });
// }
// });
// }
// });
// // 获取导航链接元素
// const anchorLinks = document.querySelectorAll(".help-a");
// // 监听页面滚动事件
window.addEventListener('scroll',scrollHandler)
function scrollHandler(){
// 遍历导航链接元素
tabItems.forEach((link,index) => {
const sectionId = link.getAttribute('data-id'); // 获取锚点ID
const section = document.querySelector(`#${sectionId}`); // 获取对应的锚点元素
if (
section &&
section.getBoundingClientRect().top>=110&&section.getBoundingClientRect().top<=150
) {
rm()
link.classList.add('active');
}
if(section &&index===0&&section.getBoundingClientRect().top>150){
rm()
link.classList.add('active')
} }
}); });
} }
});
</script> </script>
</html> </html>