Question

我有一个常见问题页面，当用户点击常见问题解答时，我希望页面重定向到FAQ问题并突出显示一个单词，然后滚动并将屏幕聚焦在突出显示的单词上。

没有插件请。

Answer 1

嗯，我明白了。试试

<div class="faque_question_table">
  <ul>
        <li  id="q1"><a class="qli" href="answer.html?#ans1">Create new course</a></li>
        <li  id="q2"><a class="qli" href="answer.html?#ans2">Set privacy and assign users</a>/li>
         <li  id="q3"><a class="qli" href="answer.html?#ans3">View course.</a></li>
         <li  id="q4"><a class="qli" href="answer.html?#ans4">Edit and delete course.</a></li>
         <li  id="q5"><a class="qli" href="answer.html?#ans5">Add thumbnail representation.</a></li>
    </ul>

 </div>
<!-- After some code your answer.html-->
<div class="help_sub_content" id='ans1'>  Your answer 1</div>
 <div class="help_sub_content" id='ans2'>  Your answer 1</div>
<div class="help_sub_content" id='ans3'>  Your answer 1</div>
<div class="help_sub_content" id='ans4'>  Your answer 1</div>

然后脚本

<script>
    $(document).ready(function()
    {

          $(".qli").click(function(){
    $('html, body').animate({'scrollTop' : $($(this).attr('href')).offset().top},1000) //Will maybe be $(window) instead of html,body.
    return false;
            });
});
</script>

Answer 2

您可以轻松地执行此操作。只需尝试以下脚本，它非常有用。我已经完成了适合您目的的fiddle。因为您需要在单击链接后转到该单词，请通过identifier word使用# symbol之后的网址split并使用javascript $('.disclosure').highlight('Test'); $('html, body').animate({ scrollTop: $(".highlight").offset().top }, 1500);获取该字词

代码

var src_str = $(".disclosure").html();
var term = "massa";
term = term.replace(/(\s+)/,"(<[^>]+>)*$1(<[^>]+>)*");
var pattern = new RegExp("("+term+")", "i");

src_str = src_str.replace(pattern, "<mark>$1</mark>");
src_str = src_str.replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<\/mark>)/,"$1</mark>$2<mark>$4");
$(".disclosure").html(src_str);
 $('html, body').animate({
         scrollTop: $("mark").offset().top
     }, 1500);

包含此脚本

http://johannburkard.de/resources/Johann/jquery.highlight-4.js

小提琴

http://jsfiddle.net/HehgB/

没有任何外部插件

{{1}}

小提琴

http://jsfiddle.net/4tZ55/

Answer 3

将id="some-id"放在单词的容器上，然后将ID放在URL上：

http://example.com/faq#some-id

如果你想要一些花哨的滚动发生，并淡出这个词，那么你可以使用像jQuery这样的东西。有很多插件可以进行花式滚动。可以在不使用插件的情况下完成淡入淡出。

如何重定向页面并在新打开的页面上突出显示一些文本

3 个答案: