スムーススクロールナビゲーション
提示词
Create a navigation menu that smoothly scrolls to sections when clicked. Include visual feedback for the active section.
代码预览
AIとの対話に追加する一言
プロンプトと一緒にコピーして、AIがより正確に意図を汲み取れるようにします
このコードをそのまま使いたいので、CDNリンクも含めた完全なHTMLファイルとして出力してください。
初心者なので、各行にコメントを追加して、何をしているか説明してください。
このコードをWordPressのテーマに組み込む方法も教えてください。
動作確認済みのコードをお願いします。エラーが出る場合の対処法も含めて。
この実装では、固定ナビゲーションバーとページセクションへのスムーズスクロールを作成します。スクロールまたはクリック時にアクティブなセクションが視覚的に強調表示されます。
提示词解读
这个提示词用于生成一个带有平滑滚动效果的导航菜单组件。当用户点击导航链接时，页面会以流畅的动画过渡到对应的内容区域，同时高亮显示当前所在章节的导航项，给用户清晰的位置反馈。这种交互设计在单页应用、产品介绍页和个人作品集网站中极为常见，能显著提升浏览体验。
使用时，可以将此提示词发送给 ChatGPT、Claude 或 GitHub Copilot 等代码生成工具，它们通常会输出完整的 HTML、CSS 和 JavaScript 实现，涵盖 IntersectionObserver 监听当前可见区域、scrollIntoView 或自定义滚动动画、以及活跃状态的样式切换。你还可以在提示词中追加具体要求，例如指定框架（React、Vue）、自定义动画时长、固定顶部导航栏偏移量，或加入移动端汉堡菜单支持，从而快速适配不同项目的实际需求。
这个提示对您有帮助吗？
评论
评论将在审核后显示
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選