|
158 | 158 | if (route === 'positions' && params.section) { |
159 | 159 | setTimeout(() => { |
160 | 160 | const target = document.getElementById(params.section); |
161 | | - if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' }); |
| 161 | + if (target) { |
| 162 | + const offset = 120; // 导航栏高度 + 额外间距 |
| 163 | + const bodyRect = document.body.getBoundingClientRect().top; |
| 164 | + const elementRect = target.getBoundingClientRect().top; |
| 165 | + const elementPosition = elementRect - bodyRect; |
| 166 | + const offsetPosition = elementPosition - offset; |
| 167 | + window.scrollTo({ top: offsetPosition, behavior: 'smooth' }); |
| 168 | + } |
162 | 169 | }, 50); |
163 | 170 | } |
164 | 171 | } |
165 | 172 |
|
| 173 | + // 滚动到指定区域的函数(用于按钮点击) |
| 174 | + function scrollToSection(sectionId) { |
| 175 | + const target = document.getElementById(sectionId); |
| 176 | + if (target) { |
| 177 | + const offset = 120; // 导航栏高度 + 额外间距 |
| 178 | + const bodyRect = document.body.getBoundingClientRect().top; |
| 179 | + const elementRect = target.getBoundingClientRect().top; |
| 180 | + const elementPosition = elementRect - bodyRect; |
| 181 | + const offsetPosition = elementPosition - offset; |
| 182 | + window.scrollTo({ top: offsetPosition, behavior: 'smooth' }); |
| 183 | + } |
| 184 | + } |
| 185 | + |
| 186 | + // 将滚动函数暴露到全局作用域 |
| 187 | + window.scrollToSection = scrollToSection; |
| 188 | + |
166 | 189 | function parseHash() { |
167 | 190 | const raw = window.location.hash.replace('#', ''); |
168 | 191 | if (!raw) return { route: 'home', params: {} }; |
|
322 | 345 | if (!list.length) return `<p>${t('people.updating')}</p>`; |
323 | 346 | return list.map(member => { |
324 | 347 | const name = member.name?.[currentLang] || member.name?.zh || member.name; |
325 | | - const nameHtml = member.homepage |
326 | | - ? `<a href="${member.homepage}" target="_blank" class="member-name-link">${name}</a>` |
327 | | - : name; |
328 | 348 |
|
329 | | - return ` |
330 | | - <div class="member-card"> |
331 | | - ${member.photo ? `<img src="${member.photo}" alt="${name}" class="member-photo">` : ''} |
332 | | - <h4 class="member-name">${nameHtml}</h4> |
333 | | - ${showTitle && member.title ? `<p class="member-title">${member.title[currentLang] || member.title.zh || member.title}</p>` : ''} |
334 | | - </div> |
335 | | - `; |
| 349 | + // 如果有主页链接,整个卡片都可点击 |
| 350 | + if (member.homepage) { |
| 351 | + return ` |
| 352 | + <a href="${member.homepage}" target="_blank" class="member-card member-card-link"> |
| 353 | + ${member.photo ? `<img src="${member.photo}" alt="${name}" class="member-photo">` : ''} |
| 354 | + <h4 class="member-name">${name}</h4> |
| 355 | + ${showTitle && member.title ? `<p class="member-title">${member.title[currentLang] || member.title.zh || member.title}</p>` : ''} |
| 356 | + </a> |
| 357 | + `; |
| 358 | + } else { |
| 359 | + return ` |
| 360 | + <div class="member-card"> |
| 361 | + ${member.photo ? `<img src="${member.photo}" alt="${name}" class="member-photo">` : ''} |
| 362 | + <h4 class="member-name">${name}</h4> |
| 363 | + ${showTitle && member.title ? `<p class="member-title">${member.title[currentLang] || member.title.zh || member.title}</p>` : ''} |
| 364 | + </div> |
| 365 | + `; |
| 366 | + } |
336 | 367 | }).join(''); |
337 | 368 | } |
338 | 369 |
|
|
562 | 593 | <article class="resource-card"> |
563 | 594 | <h3>${card.title}</h3> |
564 | 595 | <p>${card.desc}</p> |
565 | | - <a class="btn btn-inline" href="#positions?section=${card.id}">${t('positions.detail.link')}</a> |
| 596 | + <a class="btn btn-inline" href="javascript:void(0)" onclick="scrollToSection('${card.id}')">${t('positions.detail.link')}</a> |
566 | 597 | </article> |
567 | 598 | `).join('')} |
568 | 599 | </div> |
|
0 commit comments